app router: ensure static prefetch renders loading.js (#55950)

Should fix the problem surfaced in #43548 (comment) The scenario in which this breaks is when we're asking the app renderer to generate a prefetch payload statically. The renderer was not checking if there were loading.js below the current rendering level, which is the root when statically rendering, so it would always render null, which was incorrect. Tested out with the original repro https://next-instant-loading-8nv6psqod-feedthejim.vercel.app
vercel · Sep 25, 2023 · ca57258 · ca57258
1 parent 69439d8
commit ca57258
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -1119,7 +1119,9 @@ export const renderToHTMLOrFlight: AppPageRender = (
                 getDynamicParamFromSegment,
                 query
               ),
-              isPrefetch && !Boolean(components.loading)
+              isPrefetch &&
+              !Boolean(components.loading) &&
+              !hasLoadingComponentInTree(loaderTree)
                 ? null
                 : // Create component tree using the slice of the loaderTree
                   // @ts-expect-error TODO-APP: fix async component type
@@ -1142,7 +1144,9 @@ export const renderToHTMLOrFlight: AppPageRender = (
 
                     return <Component />
                   }),
-              isPrefetch && !Boolean(components.loading)
+              isPrefetch &&
+              !Boolean(components.loading) &&
+              !hasLoadingComponentInTree(loaderTree)
                 ? null
                 : (() => {
                     const { layoutOrPagePath } =

diff --git a/test/e2e/app-dir/app/app/linking/about/loading.js b/test/e2e/app-dir/app/app/linking/about/loading.js
@@ -0,0 +1,3 @@
+export default function AboutLoading() {
+  return <p id="about-loading">About loading...</p>
+}
diff --git a/test/e2e/app-dir/app/index.test.ts b/test/e2e/app-dir/app/index.test.ts
@@ -19,7 +19,7 @@ createNextDescribe(
         ).toBeTruthy()
         expect(
           await next.readFile('.next/server/app/linking/about.prefetch.rsc')
-        ).toBeTruthy()
+        ).toContain('About loading...')
         expect(
           await next.readFile(
             '.next/server/app/dashboard/deployments/breakdown.prefetch.rsc'