offline navigations: persist initial-load navigation data (11/25)

Author: feedthejim

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

@@ -68,14 +68,19 @@ function neverResolveOfflineNavigationResponse(): Promise<Response> {
   return new Promise<Response>(() => {})
 }
 
-function createOfflineNavigationClientResumeFetch():
-  | Promise<Response>
+type OfflineNavigationFallbackResponse = {
+  requestKind: 'client-resume' | 'initial-load'
+  response: Response
+}
+
+function createOfflineNavigationFallbackResponse():
+  | Promise<OfflineNavigationFallbackResponse>
   | undefined {
   if (!isOfflineNavigationFallbackDocument()) {
     return undefined
   }
 
-  return (async () => {
+  return (async (): Promise<OfflineNavigationFallbackResponse> => {
     const {
       createOfflineNavigationRSCResponse,
       isOfflineNavigationRSCResponsePayload,
@@ -94,27 +99,44 @@ function createOfflineNavigationClientResumeFetch():
 
     if (
       !isOfflineNavigationRSCResponsePayload(payload) ||
-      payload.requestKind !== 'client-resume'
+      (payload.requestKind !== 'client-resume' &&
+        payload.requestKind !== 'initial-load')
     ) {
       showOfflineNavigationCacheMiss()
-      return neverResolveOfflineNavigationResponse()
+      return {
+        requestKind: 'client-resume',
+        response: await neverResolveOfflineNavigationResponse(),
+      }
     }
 
-    return createOfflineNavigationRSCResponse(payload)
-  })().catch(() => {
+    const requestKind: OfflineNavigationFallbackResponse['requestKind'] =
+      payload.requestKind === 'initial-load' ? 'initial-load' : 'client-resume'
+
+    return {
+      requestKind,
+      response: createOfflineNavigationRSCResponse(payload),
+    }
+  })().catch(async (): Promise<OfflineNavigationFallbackResponse> => {
     showOfflineNavigationCacheMiss()
-    return neverResolveOfflineNavigationResponse()
+    return {
+      requestKind: 'client-resume',
+      response: await neverResolveOfflineNavigationResponse(),
+    }
   })
 }
 
+const offlineNavigationFallbackResponse =
+  createOfflineNavigationFallbackResponse()
 const offlineNavigationClientResumeFetch =
-  createOfflineNavigationClientResumeFetch()
+  offlineNavigationFallbackResponse?.then(({ response }) => response)
 
+const hasClientResumeShell =
+  // @ts-expect-error
+  Boolean(window.__NEXT_CLIENT_RESUME)
 const hasLockedStaticShell =
   Boolean(instantTestStaticFetch) ||
   Boolean(offlineNavigationClientResumeFetch) ||
-  // @ts-expect-error
-  Boolean(window.__NEXT_CLIENT_RESUME)
+  hasClientResumeShell
 
 const encoder = new TextEncoder()
 
@@ -268,6 +290,19 @@ if (process.env.NODE_ENV !== 'production') {
 // know if `l` is present until React decodes the payload, so always tee and
 // cancel the clone if not needed.
 let initialFlightStreamForCache: ReadableStream<Uint8Array> | null = null
+let initialFlightStreamForOfflineNavigationCache: ReadableStream<Uint8Array> | null =
+  null
+if (
+  process.env.__NEXT_OFFLINE_NAVIGATIONS &&
+  process.env.NODE_ENV === 'production' &&
+  process.env.__NEXT_CONFIG_OUTPUT !== 'export' &&
+  !process.env.__NEXT_DEV_SERVER &&
+  !hasLockedStaticShell
+) {
+  const [forApp, forOfflineNavigationCache] = readable.tee()
+  readable = forApp
+  initialFlightStreamForOfflineNavigationCache = forOfflineNavigationCache
+}
 if (
   process.env.__NEXT_CACHE_COMPONENTS &&
   process.env.__NEXT_EXPERIMENTAL_CACHED_NAVIGATIONS &&
@@ -323,12 +358,17 @@ if (instantTestStaticFetch) {
       debugChannel,
       unstable_allowPartialStream: true,
     })
-  ).then(async (fallbackInitialRSCPayload) =>
-    createInitialRSCPayloadFromFallbackPrerender(
-      await offlineNavigationClientResumeFetch,
+  ).then(async (fallbackInitialRSCPayload) => {
+    const fallbackResponse = await offlineNavigationFallbackResponse!
+    if (fallbackResponse.requestKind === 'initial-load') {
+      return fallbackInitialRSCPayload
+    }
+
+    return createInitialRSCPayloadFromFallbackPrerender(
+      fallbackResponse.response,
       fallbackInitialRSCPayload
     )
-  )
+  })
 } else if (
   // @ts-expect-error
   window.__NEXT_CLIENT_RESUME
@@ -482,6 +522,7 @@ export async function hydrate(
       navigatedAt: initialTimestamp,
       initialRSCPayload,
       initialFlightStreamForCache,
+      initialFlightStreamForOfflineNavigationCache,
       location: window.location,
     }),
     instrumentationHooks

packages/next/src/client/components/router-reducer/create-initial-router-state.ts

@@ -21,18 +21,21 @@ import {
 import { decodeStaticStage } from './fetch-server-response'
 import { discoverKnownRoute } from '../segment-cache/optimistic-routes'
 import type { NormalizedSearch } from '../segment-cache/cache-key'
+import { RSC_CONTENT_TYPE_HEADER } from '../app-router-headers'
 
 export interface InitialRouterStateParameters {
   navigatedAt: number
   initialRSCPayload: InitialRSCPayload
   initialFlightStreamForCache?: ReadableStream<Uint8Array> | null
+  initialFlightStreamForOfflineNavigationCache?: ReadableStream<Uint8Array> | null
   location: Location | null
 }
 
 export function createInitialRouterState({
   navigatedAt,
   initialRSCPayload,
   initialFlightStreamForCache,
+  initialFlightStreamForOfflineNavigationCache,
   location,
 }: InitialRouterStateParameters): AppRouterState {
   const {
@@ -88,6 +91,12 @@ export function createInitialRouterState({
     acc
   )
   const metadataVaryPath = acc.metadataVaryPath
+  const initialStaleAt =
+    location === null ||
+    initialSeedData === null ||
+    initialStaticStageByteLength !== undefined
+      ? null
+      : getStaleAt(navigatedAt, initialStaleTime)
   const initialTask = createInitialCacheNodeForHydration(
     navigatedAt,
     initialRouteTree,
@@ -157,7 +166,7 @@ export function createInitialRouterState({
         // hydration and write it into the cache directly.
         const now = Date.now()
 
-        getStaleAt(now, initialStaleTime)
+        initialStaleAt!
           .then((staleAt) => {
             writeStaticStageResponseIntoCache(
               now,
@@ -216,6 +225,18 @@ export function createInitialRouterState({
     }
   }
 
+  persistInitialOfflineNavigationResponse({
+    initialCouldBeIntercepted,
+    initialDynamicStaleTimeSeconds,
+    initialFlightStreamForOfflineNavigationCache,
+    initialRuntimePrefetchStream,
+    initialStaleAt,
+    initialStaticStageByteLength,
+    initialSupportsPerSegmentPrefetching,
+    location,
+    navigatedAt,
+  })
+
   // NOTE: We intentionally don't check if any data needs to be fetched from the
   // server. We assume the initial hydration payload is sufficient to render
   // the page.
@@ -259,3 +280,82 @@ export function createInitialRouterState({
 
   return initialState
 }
+
+function persistInitialOfflineNavigationResponse({
+  initialCouldBeIntercepted,
+  initialDynamicStaleTimeSeconds,
+  initialFlightStreamForOfflineNavigationCache,
+  initialRuntimePrefetchStream,
+  initialStaleAt,
+  initialStaticStageByteLength,
+  initialSupportsPerSegmentPrefetching,
+  location,
+  navigatedAt,
+}: {
+  initialCouldBeIntercepted: boolean
+  initialDynamicStaleTimeSeconds: number | undefined
+  initialFlightStreamForOfflineNavigationCache:
+    | ReadableStream<Uint8Array>
+    | null
+    | undefined
+  initialRuntimePrefetchStream: ReadableStream<Uint8Array> | undefined
+  initialStaleAt: Promise<number> | null
+  initialStaticStageByteLength: Promise<number> | undefined
+  initialSupportsPerSegmentPrefetching: boolean
+  location: Location | null
+  navigatedAt: number
+}): void {
+  if (initialFlightStreamForOfflineNavigationCache == null) {
+    return
+  }
+
+  if (
+    !process.env.__NEXT_OFFLINE_NAVIGATIONS ||
+    process.env.__NEXT_DEV_SERVER ||
+    process.env.NODE_ENV !== 'production' ||
+    process.env.__NEXT_CONFIG_OUTPUT === 'export' ||
+    location === null ||
+    !initialSupportsPerSegmentPrefetching ||
+    initialCouldBeIntercepted ||
+    initialDynamicStaleTimeSeconds !== undefined ||
+    initialRuntimePrefetchStream !== undefined ||
+    initialStaleAt === null ||
+    initialStaticStageByteLength !== undefined
+  ) {
+    initialFlightStreamForOfflineNavigationCache.cancel()
+    return
+  }
+
+  const response = new Response(initialFlightStreamForOfflineNavigationCache, {
+    headers: { 'content-type': RSC_CONTENT_TYPE_HEADER },
+    status: 200,
+    statusText: 'OK',
+  })
+  Object.defineProperty(response, 'url', {
+    value: createHrefFromUrl(location),
+  })
+
+  const {
+    createOfflineNavigationRSCResponsePayload,
+    writeOfflineNavigationRSCResponseCacheEntry,
+  } =
+    require('./offline-navigation-cache') as typeof import('./offline-navigation-cache')
+
+  const payload = createOfflineNavigationRSCResponsePayload(
+    response,
+    'initial-load'
+  ).catch(() => null)
+
+  void (async () => {
+    const staleAt = await initialStaleAt
+    await writeOfflineNavigationRSCResponseCacheEntry({
+      expiresAt: staleAt,
+      payload,
+      staleAt,
+      url: createHrefFromUrl(location),
+      now: navigatedAt,
+    })
+  })().catch(() => {
+    // The page already rendered. Offline persistence must not affect boot.
+  })
+}

packages/next/src/client/components/router-reducer/offline-navigation-cache.test.ts

@@ -203,6 +203,19 @@ describe('offline navigation cache', () => {
     })
   })
 
+  it('accepts initial load RSC responses for offline document boot', async () => {
+    const payload = await createOfflineNavigationRSCResponsePayload(
+      new Response('0:["$","payload"]'),
+      'initial-load'
+    )
+
+    expect(isOfflineNavigationRSCResponsePayload(payload)).toBe(true)
+    expect(payload).toMatchObject({
+      kind: 'rsc-response',
+      requestKind: 'initial-load',
+    })
+  })
+
   it('deletes exact URL entries', async () => {
     const storage = new MemoryOfflineNavigationCacheStorage()
     const cache = createOfflineNavigationCache(storage)

packages/next/src/client/components/router-reducer/offline-navigation-cache.ts

@@ -12,6 +12,7 @@ type OfflineNavigationRSCResponseRequestKind =
   | 'navigation'
   | 'route-prefetch'
   | 'client-resume'
+  | 'initial-load'
 
 export type OfflineNavigationCacheEntry = {
   version: typeof ENTRY_VERSION
@@ -217,7 +218,8 @@ export function isOfflineNavigationRSCResponsePayload(
     candidate.kind === 'rsc-response' &&
     (candidate.requestKind === 'navigation' ||
       candidate.requestKind === 'route-prefetch' ||
-      candidate.requestKind === 'client-resume') &&
+      candidate.requestKind === 'client-resume' ||
+      candidate.requestKind === 'initial-load') &&
     typeof candidate.url === 'string' &&
     typeof candidate.status === 'number' &&
     typeof candidate.statusText === 'string' &&