Merge branch 'canary' into update/fonts-data-1709251861583

packages/next/src/server/app-render/types.ts

@@ -150,6 +150,7 @@ export interface RenderOptsPartial {
     swrDelta: SwrDelta | undefined
   }
   postponed?: string
+  isStaticGeneration?: boolean
 }
 
 export type RenderOpts = LoadComponentsReturnType<AppPageModule> &

packages/next/src/server/base-server.ts

@@ -2123,9 +2123,17 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       postponed: string | undefined
     }) => Promise<ResponseCacheEntry | null>
 
+    // allow debugging the skeleton in dev with PPR
+    // instead of continuing to resume stream right away
+    const debugPPRSkeleton = Boolean(
+      this.nextConfig.experimental.ppr &&
+        this.renderOpts.dev &&
+        query.__nextppronly
+    )
+
     const doRender: Renderer = async ({ postponed }) => {
       // In development, we always want to generate dynamic HTML.
-      const supportsDynamicHTML: boolean =
+      let supportsDynamicHTML: boolean =
         // If this isn't a data request and we're not in development, then we
         // support dynamic HTML.
         (!isDataReq && opts.dev === true) ||
@@ -2197,6 +2205,14 @@ export default abstract class Server<ServerOptions extends Options = Options> {
         postponed,
       }
 
+      if (debugPPRSkeleton) {
+        supportsDynamicHTML = false
+        renderOpts.nextExport = true
+        renderOpts.supportsDynamicHTML = false
+        renderOpts.isStaticGeneration = true
+        renderOpts.isRevalidate = true
+      }
+
       // Legacy render methods will return a render result that needs to be
       // served by the server.
       let result: RenderResult
@@ -2855,6 +2871,14 @@ export default abstract class Server<ServerOptions extends Options = Options> {
         }
       }
 
+      if (debugPPRSkeleton) {
+        return {
+          type: 'html',
+          body,
+          revalidate: 0,
+        }
+      }
+
       // This request has postponed, so let's create a new transformer that the
       // dynamic data can pipe to that will attach the dynamic data to the end
       // of the response.

test/e2e/app-dir/app/app/skeleton/page.js

@@ -0,0 +1,20 @@
+import { cookies } from 'next/headers'
+import { Suspense } from 'react'
+
+async function Suspend() {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 3000)
+  })
+  cookies()
+  return <p>suspended content</p>
+}
+
+export default function Page() {
+  return (
+    <div>
+      <Suspense fallback={'Skeleton!!!'}>
+        <Suspend />
+      </Suspense>
+    </div>
+  )
+}

test/e2e/app-dir/app/index.test.ts

@@ -20,6 +20,17 @@ createNextDescribe(
     },
   },
   ({ next, isNextDev: isDev, isNextStart, isNextDeploy, isTurbopack }) => {
+    if (isDev && isPPREnabledByDefault) {
+      it('should allow returning just skeleton in dev with query', async () => {
+        const res = await next.fetch('/skeleton?__nextppronly=1')
+        expect(res.status).toBe(200)
+
+        const html = await res.text()
+        expect(html).toContain('Skeleton')
+        expect(html).not.toContain('suspended content')
+      })
+    }
+
     if (process.env.NEXT_EXPERIMENTAL_COMPILE) {
       it('should provide query for getStaticProps page correctly', async () => {
         const res = await next.fetch('/ssg?hello=world')