From ca57258dbd4d5b3aba119088e2c188bf0f4671bc Mon Sep 17 00:00:00 2001
From: Jimmy Lai <laijimmy0@gmail.com>
Date: Mon, 25 Sep 2023 14:59:31 +0200
Subject: [PATCH] app router: ensure static prefetch renders loading.js
 (#55950)

Should fix the problem surfaced in https://github.com/vercel/next.js/issues/43548#issuecomment-1732416492

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
---
 packages/next/src/server/app-render/app-render.tsx | 8 ++++++--
 test/e2e/app-dir/app/app/linking/about/loading.js  | 3 +++
 test/e2e/app-dir/app/index.test.ts                 | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 test/e2e/app-dir/app/app/linking/about/loading.js

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 44f2834b66778..a177bdb4e3154 100644
--- 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
new file mode 100644
index 0000000000000..3d9aa325a9cf7
--- /dev/null
+++ 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
index 08babe21860c8..b431964b671b6 100644
--- 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'