Reconstruct prefetched routes from offline router cache

Author: feedthejim

packages/next/src/client/app-index.tsx

@@ -20,6 +20,7 @@ import {
   createMutableActionQueue,
 } from './components/app-router-instance'
 import AppRouter from './components/app-router'
+import DefaultGlobalError from './components/builtin/global-error'
 import type { InitialRSCPayload } from '../shared/lib/app-router-types'
 import { createInitialRouterState } from './components/router-reducer/create-initial-router-state'
 import { MissingSlotContext } from '../shared/lib/app-router-context.shared-runtime'
@@ -63,12 +64,17 @@ type OfflineNavigationCacheMissReason =
   | 'unsupported-request-kind'
   | 'read-error'
 
+type OfflineNavigationFallbackRequestKind =
+  | 'client-resume'
+  | 'initial-load'
+  | 'router-cache'
+
 type OfflineNavigationFallbackDiagnostic =
   | {
       type: 'cache-hit'
       url: string
       buildId: string | undefined
-      requestKind: OfflineNavigationFallbackResponse['requestKind']
+      requestKind: OfflineNavigationFallbackRequestKind
     }
   | {
       type: 'cache-miss'
@@ -89,6 +95,12 @@ type OfflineNavigationFallbackDiagnostic =
         skipped: number
       }
     }
+  | {
+      type: 'router-cache-reconstruction-miss'
+      url: string
+      buildId: string | undefined
+      reason: string
+    }
 
 declare global {
   interface Window {
@@ -109,7 +121,7 @@ function reportOfflineNavigationFallbackDiagnostic(
 }
 
 function showOfflineNavigationCacheHit(
-  requestKind: OfflineNavigationFallbackResponse['requestKind'],
+  requestKind: OfflineNavigationFallbackRequestKind,
   buildId: string | undefined
 ): void {
   document.documentElement.setAttribute(
@@ -157,23 +169,39 @@ function showOfflineNavigationCacheMiss(
   })
 }
 
-function neverResolveOfflineNavigationResponse(): Promise<Response> {
-  return new Promise<Response>(() => {})
+function neverResolveInitialRSCPayload(): Promise<InitialRSCPayload> {
+  return new Promise<InitialRSCPayload>(() => {})
 }
 
 type OfflineNavigationFallbackResponse = {
   requestKind: 'client-resume' | 'initial-load'
   response: Response
 }
 
-function createOfflineNavigationFallbackResponse():
-  | Promise<OfflineNavigationFallbackResponse>
+type OfflineNavigationFallbackBootstrap =
+  | {
+      kind: 'rsc-response'
+      response: OfflineNavigationFallbackResponse
+      buildId: string | undefined
+    }
+  | {
+      kind: 'router-cache'
+      initialRSCPayload: InitialRSCPayload
+      buildId: string | undefined
+    }
+  | {
+      kind: 'cache-miss'
+      buildId: string | undefined
+    }
+
+function createOfflineNavigationFallbackBootstrap():
+  | Promise<OfflineNavigationFallbackBootstrap>
   | undefined {
   if (!isOfflineNavigationFallbackDocument()) {
     return undefined
   }
 
-  return (async (): Promise<OfflineNavigationFallbackResponse> => {
+  return (async (): Promise<OfflineNavigationFallbackBootstrap> => {
     const {
       createOfflineNavigationRSCResponse,
       isOfflineNavigationRSCResponsePayload,
@@ -191,13 +219,54 @@ function createOfflineNavigationFallbackResponse():
     const payload = entry?.payload
 
     if (!isOfflineNavigationRSCResponsePayload(payload)) {
+      if (payload === undefined) {
+        const {
+          createOfflineNavigationInitialRSCPayloadFromRouterCache,
+          hydrateOfflineNavigationRouterCache,
+        } =
+          require('./components/segment-cache/cache') as typeof import('./components/segment-cache/cache')
+
+        const hydrationResult = await hydrateOfflineNavigationRouterCache({
+          buildId,
+        })
+        reportOfflineNavigationFallbackDiagnostic({
+          type: 'router-cache-hydration',
+          url: location.href,
+          buildId,
+          routes: hydrationResult.routes,
+          segments: hydrationResult.segments,
+        })
+
+        const reconstruction =
+          createOfflineNavigationInitialRSCPayloadFromRouterCache({
+            buildId,
+            globalErrorState: [DefaultGlobalError, undefined],
+            now: Date.now(),
+            url: location.href,
+          })
+        if (reconstruction.status === 'fulfilled') {
+          showOfflineNavigationCacheHit('router-cache', buildId)
+          return {
+            kind: 'router-cache',
+            initialRSCPayload: reconstruction.initialRSCPayload,
+            buildId,
+          }
+        }
+        reportOfflineNavigationFallbackDiagnostic({
+          type: 'router-cache-reconstruction-miss',
+          url: location.href,
+          buildId,
+          reason: reconstruction.reason,
+        })
+      }
+
       showOfflineNavigationCacheMiss(
         payload === undefined ? 'missing-entry' : 'invalid-payload',
         buildId
       )
       return {
-        requestKind: 'client-resume',
-        response: await neverResolveOfflineNavigationResponse(),
+        kind: 'cache-miss',
+        buildId,
       }
     }
 
@@ -207,8 +276,8 @@ function createOfflineNavigationFallbackResponse():
     ) {
       showOfflineNavigationCacheMiss('unsupported-request-kind', buildId)
       return {
-        requestKind: 'client-resume',
-        response: await neverResolveOfflineNavigationResponse(),
+        kind: 'cache-miss',
+        buildId,
       }
     }
 
@@ -217,29 +286,37 @@ function createOfflineNavigationFallbackResponse():
 
     showOfflineNavigationCacheHit(requestKind, buildId)
     return {
-      requestKind,
-      response: createOfflineNavigationRSCResponse(payload),
+      kind: 'rsc-response',
+      buildId,
+      response: {
+        requestKind,
+        response: createOfflineNavigationRSCResponse(payload),
+      },
     }
-  })().catch(async (): Promise<OfflineNavigationFallbackResponse> => {
+  })().catch((): OfflineNavigationFallbackBootstrap => {
     showOfflineNavigationCacheMiss('read-error', undefined)
     return {
-      requestKind: 'client-resume',
-      response: await neverResolveOfflineNavigationResponse(),
+      kind: 'cache-miss',
+      buildId: undefined,
     }
   })
 }
 
-const offlineNavigationFallbackResponse =
-  createOfflineNavigationFallbackResponse()
-const offlineNavigationClientResumeFetch =
-  offlineNavigationFallbackResponse?.then(({ response }) => response)
+const offlineNavigationFallbackBootstrap =
+  createOfflineNavigationFallbackBootstrap()
+
+if (process.env.__NEXT_USE_OFFLINE && offlineNavigationFallbackBootstrap) {
+  const { notifyOffline } =
+    require('./components/offline') as typeof import('./components/offline')
+  notifyOffline()
+}
 
 const hasClientResumeShell =
   // @ts-expect-error
   Boolean(window.__NEXT_CLIENT_RESUME)
 const hasLockedStaticShell =
   Boolean(instantTestStaticFetch) ||
-  Boolean(offlineNavigationClientResumeFetch) ||
+  Boolean(offlineNavigationFallbackBootstrap) ||
   hasClientResumeShell
 
 const encoder = new TextEncoder()
@@ -410,7 +487,7 @@ if (
 if (
   process.env.__NEXT_CACHE_COMPONENTS &&
   process.env.__NEXT_EXPERIMENTAL_CACHED_NAVIGATIONS &&
-  !offlineNavigationClientResumeFetch
+  !offlineNavigationFallbackBootstrap
 ) {
   const [forReact, forCache] = readable.tee()
   readable = forReact
@@ -454,25 +531,39 @@ if (instantTestStaticFetch) {
       initialRSCPayload
     )
   })
-} else if (offlineNavigationClientResumeFetch) {
-  initialServerResponse = Promise.resolve(
-    createFromFetch<InitialRSCPayload>(offlineNavigationClientResumeFetch, {
-      callServer,
-      findSourceMapURL,
-      debugChannel,
-      unstable_allowPartialStream: true,
-    })
-  ).then(async (fallbackInitialRSCPayload) => {
-    const fallbackResponse = await offlineNavigationFallbackResponse!
-    if (fallbackResponse.requestKind === 'initial-load') {
-      return fallbackInitialRSCPayload
-    }
+} else if (offlineNavigationFallbackBootstrap) {
+  initialServerResponse = offlineNavigationFallbackBootstrap.then(
+    async (bootstrap) => {
+      if (bootstrap.kind === 'cache-miss') {
+        return await neverResolveInitialRSCPayload()
+      }
 
-    return createInitialRSCPayloadFromFallbackPrerender(
-      fallbackResponse.response,
-      fallbackInitialRSCPayload
-    )
-  })
+      if (bootstrap.kind === 'router-cache') {
+        return bootstrap.initialRSCPayload
+      }
+
+      const fallbackResponse = bootstrap.response
+      const fallbackInitialRSCPayload =
+        await createFromFetch<InitialRSCPayload>(
+          Promise.resolve(fallbackResponse.response),
+          {
+            callServer,
+            findSourceMapURL,
+            debugChannel,
+            unstable_allowPartialStream: true,
+          }
+        )
+
+      if (fallbackResponse.requestKind === 'initial-load') {
+        return fallbackInitialRSCPayload
+      }
+
+      return createInitialRSCPayloadFromFallbackPrerender(
+        fallbackResponse.response,
+        fallbackInitialRSCPayload
+      )
+    }
+  )
 } else if (
   // @ts-expect-error
   window.__NEXT_CLIENT_RESUME
@@ -598,7 +689,7 @@ export async function hydrate(
   if (process.env.__NEXT_USE_OFFLINE) {
     const { notifyOffline } =
       require('./components/offline') as typeof import('./components/offline')
-    if (offlineNavigationClientResumeFetch) {
+    if (offlineNavigationFallbackBootstrap) {
       notifyOffline()
     }
   }
@@ -624,19 +715,22 @@ export async function hydrate(
   if (
     process.env.__NEXT_OFFLINE_NAVIGATIONS &&
     !process.env.__NEXT_DEV_SERVER &&
-    offlineNavigationClientResumeFetch
+    offlineNavigationFallbackBootstrap
   ) {
     try {
-      const { hydrateOfflineNavigationRouterCache } =
-        require('./components/segment-cache/cache') as typeof import('./components/segment-cache/cache')
-      const result = await hydrateOfflineNavigationRouterCache()
-      reportOfflineNavigationFallbackDiagnostic({
-        type: 'router-cache-hydration',
-        url: location.href,
-        buildId,
-        routes: result.routes,
-        segments: result.segments,
-      })
+      const bootstrap = await offlineNavigationFallbackBootstrap
+      if (bootstrap.kind === 'rsc-response') {
+        const { hydrateOfflineNavigationRouterCache } =
+          require('./components/segment-cache/cache') as typeof import('./components/segment-cache/cache')
+        const result = await hydrateOfflineNavigationRouterCache({ buildId })
+        reportOfflineNavigationFallbackDiagnostic({
+          type: 'router-cache-hydration',
+          url: location.href,
+          buildId,
+          routes: result.routes,
+          segments: result.segments,
+        })
+      }
     } catch {
       // The exact URL fallback already booted. Router cache hydration should
       // only improve later navigations, never block the current render.