[Segment Cache] use loading from dynamic response for unprefetched navigations (#83305)

If we're navigating to a page without a prefetch, we obviously can't
show an instant loading state. However, if the page has a `loading.tsx`,
then the loading component will still stream in as part of the dynamic
response, and we should use it to render a loading boundary around the
page content. If we don't, then the navigation will block until the
content resolves into something renderable (either finishes or manages
to render a suspense boundary of its own).

This wasn't being done because `createPendingCacheNode` (used for
unprefetched navigations) was always setting `loading` to `null`, and
then was never updated with the `loading` received from the dynamic
response. With this PR, if we don't already have a prefetched loading
state, we'll now handle `loading` the same as we do `rsc` (the segment's
content) -- we'll create a deferred promise for `loading` and resolve it
when the relevant segment streams in.

Note that before the deferred promise is resolved, the relevant
`LoadingBoundary` itself will suspend on it, but since it sits right
above `rsc` (and is in a new subtree) we won't hide any more contents
than we would when suspending on the `rsc` promise -- we don't have a
prefetch, so we won't have an existing loading state to display there
anyway.

Also I had to do some typescript tweaks to `createDeferredRsc` to allow
it to contain a more specific type than `ReactNode`. it's a bit noisy,
so that's pulled out into a separate commit for ease of review.

Author: lubieowoce

packages/next/src/client/components/router-reducer/ppr-navigations.ts

@@ -973,24 +973,28 @@ function createPendingCacheNode(
   }
 
   const maybePrefetchRsc = prefetchData !== null ? prefetchData[1] : null
-  const maybePrefetchLoading = prefetchData !== null ? prefetchData[3] : null
   return {
     lazyData: null,
     parallelRoutes: parallelRoutes,
 
     prefetchRsc: maybePrefetchRsc !== undefined ? maybePrefetchRsc : null,
     prefetchHead: isLeafSegment ? prefetchHead : [null, null],
 
-    // TODO: Technically, a loading boundary could contain dynamic data. We must
-    // have separate `loading` and `prefetchLoading` fields to handle this, like
-    // we do for the segment data and head.
-    loading: maybePrefetchLoading !== undefined ? maybePrefetchLoading : null,
-
     // Create a deferred promise. This will be fulfilled once the dynamic
     // response is received from the server.
     rsc: createDeferredRsc() as React.ReactNode,
     head: isLeafSegment ? (createDeferredRsc() as React.ReactNode) : null,
 
+    // TODO: Technically, a loading boundary could contain dynamic data. We must
+    // have separate `loading` and `prefetchLoading` fields to handle this, like
+    // we do for the segment data and head.
+    loading:
+      prefetchData !== null
+        ? (prefetchData[3] ?? null)
+        : // If we don't have a prefetch, then we don't know if there's a loading component.
+          // We'll fulfill it based on the dynamic response, just like `rsc` and `head`.
+          createDeferredRsc<LoadingModuleData>(),
+
     navigatedAt,
   }
 }
@@ -1089,6 +1093,14 @@ function finishPendingCacheNode(
     // been populated by a different navigation. We must not overwrite it.
   }
 
+  // If we navigated without a prefetch, then `loading` will be a deferred promise too.
+  // Fulfill it using the dynamic response so that we can display the loading boundary.
+  const loading = cacheNode.loading
+  if (isDeferredRsc(loading)) {
+    const dynamicLoading = dynamicData[3]
+    loading.resolve(dynamicLoading)
+  }
+
   // Check if this is a leaf segment. If so, it will have a `head` property with
   // a pending promise that needs to be resolved with the dynamic head from
   // the server.
@@ -1153,6 +1165,7 @@ function abortPendingCacheNode(
       // used to construct the cache nodes in the first place.
     }
   }
+
   const rsc = cacheNode.rsc
   if (isDeferredRsc(rsc)) {
     if (error === null) {
@@ -1164,6 +1177,11 @@ function abortPendingCacheNode(
     }
   }
 
+  const loading = cacheNode.loading
+  if (isDeferredRsc(loading)) {
+    loading.resolve(null)
+  }
+
   // Check if this is a leaf segment. If so, it will have a `head` property with
   // a pending promise that needs to be resolved. If an error was provided, we
   // will not resolve it with an error, since this is rendered at the root of
@@ -1240,61 +1258,63 @@ export function updateCacheNodeOnPopstateRestoration(
 
 const DEFERRED = Symbol()
 
-type PendingDeferredRsc = Promise<React.ReactNode> & {
+type PendingDeferredRsc<T> = Promise<T> & {
   status: 'pending'
-  resolve: (value: React.ReactNode) => void
+  resolve: (value: T) => void
   reject: (error: any) => void
   tag: Symbol
 }
 
-type FulfilledDeferredRsc = Promise<React.ReactNode> & {
+type FulfilledDeferredRsc<T> = Promise<T> & {
   status: 'fulfilled'
-  value: React.ReactNode
-  resolve: (value: React.ReactNode) => void
+  value: T
+  resolve: (value: T) => void
   reject: (error: any) => void
   tag: Symbol
 }
 
-type RejectedDeferredRsc = Promise<React.ReactNode> & {
+type RejectedDeferredRsc<T> = Promise<T> & {
   status: 'rejected'
   reason: any
-  resolve: (value: React.ReactNode) => void
+  resolve: (value: T) => void
   reject: (error: any) => void
   tag: Symbol
 }
 
-type DeferredRsc =
-  | PendingDeferredRsc
-  | FulfilledDeferredRsc
-  | RejectedDeferredRsc
+type DeferredRsc<T extends React.ReactNode = React.ReactNode> =
+  | PendingDeferredRsc<T>
+  | FulfilledDeferredRsc<T>
+  | RejectedDeferredRsc<T>
 
 // This type exists to distinguish a DeferredRsc from a Flight promise. It's a
 // compromise to avoid adding an extra field on every Cache Node, which would be
 // awkward because the pre-PPR parts of codebase would need to account for it,
 // too. We can remove it once type Cache Node type is more settled.
 function isDeferredRsc(value: any): value is DeferredRsc {
-  return value && value.tag === DEFERRED
+  return value && typeof value === 'object' && value.tag === DEFERRED
 }
 
-function createDeferredRsc(): PendingDeferredRsc {
+function createDeferredRsc<
+  T extends React.ReactNode = React.ReactNode,
+>(): PendingDeferredRsc<T> {
   let resolve: any
   let reject: any
-  const pendingRsc = new Promise<React.ReactNode>((res, rej) => {
+  const pendingRsc = new Promise<T>((res, rej) => {
     resolve = res
     reject = rej
-  }) as PendingDeferredRsc
+  }) as PendingDeferredRsc<T>
   pendingRsc.status = 'pending'
-  pendingRsc.resolve = (value: React.ReactNode) => {
+  pendingRsc.resolve = (value: T) => {
     if (pendingRsc.status === 'pending') {
-      const fulfilledRsc: FulfilledDeferredRsc = pendingRsc as any
+      const fulfilledRsc: FulfilledDeferredRsc<T> = pendingRsc as any
       fulfilledRsc.status = 'fulfilled'
       fulfilledRsc.value = value
       resolve(value)
     }
   }
   pendingRsc.reject = (error: any) => {
     if (pendingRsc.status === 'pending') {
-      const rejectedRsc: RejectedDeferredRsc = pendingRsc as any
+      const rejectedRsc: RejectedDeferredRsc<T> = pendingRsc as any
       rejectedRsc.status = 'rejected'
       rejectedRsc.reason = error
       reject(error)

test/e2e/app-dir/segment-cache/no-prefetch/app/layout.tsx

@@ -0,0 +1,8 @@
+export default function RootLayout({ children }: LayoutProps<'/'>) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/segment-cache/no-prefetch/app/page.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Home</h1>
+      <Link href="/with-loading" prefetch={false}>
+        Go to /with-loading (no prefetch)
+      </Link>
+    </main>
+  )
+}

test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/client.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { use } from 'react'
+
+const infinitePromise = new Promise<never>(() => {})
+
+export function SuspendForeverOnClient() {
+  use(infinitePromise)
+  return null
+}

test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div id="loading-component">Loading...</div>
+}

test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/page.tsx

@@ -0,0 +1,12 @@
+import { connection } from 'next/server'
+import { SuspendForeverOnClient } from './client'
+
+export default async function Page() {
+  await connection()
+  return (
+    <main>
+      {/* Block on the client to make sure that the loading boundary works correctly. */}
+      <SuspendForeverOnClient />
+    </main>
+  )
+}

test/e2e/app-dir/segment-cache/no-prefetch/next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  experimental: {
+    clientSegmentCache: true,
+    clientParamParsing: true,
+  },
+  productionBrowserSourceMaps: true,
+}

test/e2e/app-dir/segment-cache/no-prefetch/no-prefetch.test.ts

@@ -0,0 +1,29 @@
+import { nextTestSetup } from 'e2e-utils'
+import { createRouterAct } from '../router-act'
+
+describe('navigating without a prefetch', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('can show a loading boundary from the dynamic response', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Navigate to a dynamic page with a `loading.tsx` without a prefetch.
+    await act(async () => {
+      await browser.elementByCss('a[href="/with-loading"]').click()
+    })
+
+    // The page suspends on the client, so we should display the `loading` that we got from the dynamic response.
+    expect(
+      await browser
+        .elementByCss('#loading-component', { state: 'visible' })
+        .text()
+    ).toContain('Loading...')
+  })
+})