Persist offline navigation route data

Author: feedthejim

packages/next/src/client/components/router-reducer/fetch-server-response.ts

@@ -16,8 +16,8 @@ import type {
 } from '../../../shared/lib/app-router-types'
 
 import {
-  type NEXT_ROUTER_PREFETCH_HEADER,
-  type NEXT_ROUTER_SEGMENT_PREFETCH_HEADER,
+  NEXT_ROUTER_PREFETCH_HEADER,
+  NEXT_ROUTER_SEGMENT_PREFETCH_HEADER,
   type NEXT_INSTANT_PREFETCH_HEADER,
   NEXT_ROUTER_STATE_TREE_HEADER,
   NEXT_RSC_UNION_QUERY,
@@ -45,8 +45,14 @@ import { NEXT_NAV_DEPLOYMENT_ID_HEADER } from '../../../lib/constants'
 import {
   stripIsPartialByte,
   createNonTaskyPrefetchResponseStream,
+  getStaleAt,
 } from '../segment-cache/cache'
 import { UnknownDynamicStaleTime } from '../segment-cache/bfcache'
+import {
+  createOfflineNavigationRSCResponsePayload,
+  writeOfflineNavigationRSCResponseCacheEntry,
+  type OfflineNavigationRSCResponsePayload,
+} from './offline-navigation-cache'
 
 const createFromReadableStream =
   createFromReadableStreamBrowser as (typeof import('react-server-dom-webpack/client.browser'))['createFromReadableStream']
@@ -275,6 +281,16 @@ export async function fetchServerResponse(
       return doMpaNavigation(normalizedFlightData)
     }
 
+    persistOfflineNavigationResponse({
+      canonicalUrl,
+      flightResponse,
+      interception,
+      isHmrRefresh: options.isHmrRefresh,
+      originalUrl,
+      postponed,
+      response: res,
+    })
+
     const staticStageData =
       cacheData !== null
         ? await resolveStaticStageData(cacheData, flightResponse, headers)
@@ -355,6 +371,7 @@ export type RSCResponse<T> = {
   url: string
   flightResponsePromise: (Promise<T> & { _debugInfo?: Array<any> }) | null
   cacheData: Promise<FetchResponseCacheData | null>
+  offlineNavigationCachePayload: Promise<OfflineNavigationRSCResponsePayload | null> | null
 }
 
 type FetchResponseCacheData = {
@@ -535,6 +552,8 @@ export async function createFetch<T>(
   let fetchUrl = new URL(url)
   await setCacheBustingSearchParam(fetchUrl, headers)
   let processed = fetch(fetchUrl, fetchOptions).then(processFetch)
+  let offlineNavigationCachePayload =
+    createOfflineNavigationCachePayloadFromProcessedResponse(processed, headers)
   let fetchPromise = processed.then(({ response }) => response)
 
   // Immediately pass the fetch promise to the Flight client so that the debug
@@ -605,6 +624,11 @@ export async function createFetch<T>(
       fetchUrl = new URL(responseUrl)
       await setCacheBustingSearchParam(fetchUrl, headers)
       processed = fetch(fetchUrl, fetchOptions).then(processFetch)
+      offlineNavigationCachePayload =
+        createOfflineNavigationCachePayloadFromProcessedResponse(
+          processed,
+          headers
+        )
       fetchPromise = processed.then(({ response }) => response)
       flightResponsePromise = shouldImmediatelyDecode
         ? createFromNextFetch<T>(fetchPromise, headers)
@@ -643,11 +667,120 @@ export async function createFetch<T>(
     flightResponsePromise: flightResponsePromise,
 
     cacheData: processed.then(({ cacheData }) => cacheData),
+
+    offlineNavigationCachePayload,
   }
 
   return rscResponse
 }
 
+function getOfflineNavigationCacheRequestKind(
+  headers: RequestHeaders
+): 'navigation' | 'route-prefetch' | 'client-resume' | null {
+  if (
+    !process.env.__NEXT_OFFLINE_NAVIGATIONS ||
+    process.env.__NEXT_DEV_SERVER ||
+    process.env.NODE_ENV !== 'production' ||
+    process.env.__NEXT_CONFIG_OUTPUT === 'export' ||
+    headers[NEXT_HMR_REFRESH_HEADER]
+  ) {
+    return null
+  }
+
+  if (
+    headers[NEXT_ROUTER_PREFETCH_HEADER] !== undefined &&
+    headers[NEXT_ROUTER_SEGMENT_PREFETCH_HEADER] === '/_full'
+  ) {
+    return 'client-resume'
+  }
+
+  if (
+    headers[NEXT_ROUTER_PREFETCH_HEADER] !== undefined &&
+    headers[NEXT_ROUTER_SEGMENT_PREFETCH_HEADER] === undefined
+  ) {
+    return 'route-prefetch'
+  }
+
+  if (
+    headers[NEXT_ROUTER_STATE_TREE_HEADER] !== undefined &&
+    headers[NEXT_ROUTER_PREFETCH_HEADER] === undefined &&
+    headers[NEXT_ROUTER_SEGMENT_PREFETCH_HEADER] === undefined
+  ) {
+    return 'navigation'
+  }
+
+  return null
+}
+
+function createOfflineNavigationCachePayloadFromProcessedResponse(
+  processed: Promise<{
+    response: Response
+    cacheData: FetchResponseCacheData | null
+  }>,
+  headers: RequestHeaders
+): Promise<OfflineNavigationRSCResponsePayload | null> | null {
+  const requestKind = getOfflineNavigationCacheRequestKind(headers)
+  if (requestKind === null) {
+    return null
+  }
+
+  return processed
+    .then(({ response }) => {
+      if (!response.ok || !response.body) {
+        return null
+      }
+
+      return createOfflineNavigationRSCResponsePayload(response, requestKind)
+    })
+    .catch(() => null)
+}
+
+function persistOfflineNavigationResponse({
+  canonicalUrl,
+  flightResponse,
+  interception,
+  isHmrRefresh,
+  originalUrl,
+  postponed,
+  response,
+}: {
+  canonicalUrl: URL
+  flightResponse: NavigationFlightResponse
+  interception: boolean
+  isHmrRefresh: boolean | undefined
+  originalUrl: URL
+  postponed: boolean
+  response: RSCResponse<NavigationFlightResponse>
+}): void {
+  if (
+    response.offlineNavigationCachePayload === null ||
+    !flightResponse.S ||
+    flightResponse.d !== undefined ||
+    flightResponse.p !== undefined ||
+    interception ||
+    isHmrRefresh ||
+    postponed ||
+    response.redirected ||
+    canonicalUrl.origin !== location.origin
+  ) {
+    return
+  }
+
+  void (async () => {
+    const now = Date.now()
+    const staleAt = await getStaleAt(now, flightResponse.s, response)
+    await writeOfflineNavigationRSCResponseCacheEntry({
+      buildId:
+        response.headers.get(NEXT_NAV_DEPLOYMENT_ID_HEADER) ?? flightResponse.b,
+      expiresAt: staleAt,
+      payload: response.offlineNavigationCachePayload!,
+      staleAt,
+      url: originalUrl,
+      now,
+    })
+  })()
+}
+
 export function createFromNextReadableStream<T>(
   flightStream: ReadableStream<Uint8Array>,
   requestHeaders: RequestHeaders | undefined,

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

@@ -1,5 +1,7 @@
 import {
   createOfflineNavigationCache,
+  createOfflineNavigationRSCResponse,
+  createOfflineNavigationRSCResponsePayload,
   deleteOfflineNavigationCacheEntry,
   normalizeOfflineNavigationCacheUrl,
   readOfflineNavigationCacheEntry,
@@ -101,6 +103,81 @@ describe('offline navigation cache', () => {
     })
   })
 
+  it('serializes RSC response payloads for persisted navigation entries', async () => {
+    const response = new Response('0:["$","payload"]', {
+      headers: {
+        'content-type': 'text/x-component',
+        'x-nextjs-stale-time': '60',
+      },
+      status: 200,
+      statusText: 'OK',
+    })
+    Object.defineProperty(response, 'url', {
+      value: 'https://example.com/dashboard?_rsc=abc',
+    })
+
+    const payload = await createOfflineNavigationRSCResponsePayload(
+      response,
+      'route-prefetch'
+    )
+    expect(payload).toMatchObject({
+      version: 1,
+      kind: 'rsc-response',
+      requestKind: 'route-prefetch',
+      status: 200,
+      statusText: 'OK',
+      headers: expect.arrayContaining([
+        ['content-type', 'text/x-component'],
+        ['x-nextjs-stale-time', '60'],
+      ]),
+    })
+
+    await expect(
+      createOfflineNavigationRSCResponse(payload).text()
+    ).resolves.toBe('0:["$","payload"]')
+  })
+
+  it('writes RSC response payloads through the exact URL cache', async () => {
+    const storage = new MemoryOfflineNavigationCacheStorage()
+    const cache = createOfflineNavigationCache(storage)
+    const payload = createOfflineNavigationRSCResponsePayload(
+      new Response('0:["$","payload"]'),
+      'navigation'
+    )
+
+    await expect(payload).resolves.toMatchObject({
+      kind: 'rsc-response',
+      requestKind: 'navigation',
+    })
+    await expect(
+      cache.write({
+        buildId: 'build-a',
+        expiresAt: 300,
+        payload: await payload,
+        staleAt: 200,
+        url: 'https://example.com/dashboard#section',
+        now: 100,
+      })
+    ).resolves.toBe(true)
+
+    await expect(
+      cache.read('https://example.com/dashboard', {
+        buildId: 'build-a',
+        now: 150,
+      })
+    ).resolves.toMatchObject({
+      buildId: 'build-a',
+      createdAt: 100,
+      payload: {
+        kind: 'rsc-response',
+        requestKind: 'navigation',
+      },
+      staleAt: 200,
+      expiresAt: 300,
+      url: 'https://example.com/dashboard',
+    })
+  })
+
   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

@@ -4,8 +4,13 @@ const DATABASE_NAME = 'next-offline-navigation-cache'
 const DATABASE_VERSION = 1
 const STORE_NAME = 'navigation-data'
 const ENTRY_VERSION = 1
+const RSC_RESPONSE_PAYLOAD_VERSION = 1
 
 type OfflineNavigationCacheKey = [buildId: string, url: string]
+type OfflineNavigationRSCResponseRequestKind =
+  | 'navigation'
+  | 'route-prefetch'
+  | 'client-resume'
 
 export type OfflineNavigationCacheEntry = {
   version: typeof ENTRY_VERSION
@@ -18,6 +23,17 @@ export type OfflineNavigationCacheEntry = {
   payload: unknown
 }
 
+export type OfflineNavigationRSCResponsePayload = {
+  version: typeof RSC_RESPONSE_PAYLOAD_VERSION
+  kind: 'rsc-response'
+  requestKind: OfflineNavigationRSCResponseRequestKind
+  url: string
+  status: number
+  statusText: string
+  headers: Array<[string, string]>
+  body: ArrayBuffer
+}
+
 export type OfflineNavigationCacheWrite = {
   url: string | URL
   staleAt: number
@@ -32,6 +48,15 @@ export type OfflineNavigationCacheReadOptions = {
   now?: number
 }
 
+export type OfflineNavigationRSCResponseCacheWrite = {
+  url: string | URL
+  staleAt: number
+  expiresAt: number
+  buildId?: string
+  now?: number
+  payload: Promise<OfflineNavigationRSCResponsePayload | null>
+}
+
 export type OfflineNavigationCacheStorage = {
   get(
     key: OfflineNavigationCacheKey
@@ -148,6 +173,48 @@ export function createOfflineNavigationCache(
   }
 }
 
+export async function createOfflineNavigationRSCResponsePayload(
+  response: Response,
+  requestKind: OfflineNavigationRSCResponseRequestKind
+): Promise<OfflineNavigationRSCResponsePayload> {
+  const clone = response.clone()
+  return {
+    version: RSC_RESPONSE_PAYLOAD_VERSION,
+    kind: 'rsc-response',
+    requestKind,
+    url: clone.url,
+    status: clone.status,
+    statusText: clone.statusText,
+    headers: Array.from(clone.headers.entries()),
+    body: await clone.arrayBuffer(),
+  }
+}
+
+export function createOfflineNavigationRSCResponse(
+  payload: OfflineNavigationRSCResponsePayload
+): Response {
+  return new Response(payload.body.slice(0), {
+    status: payload.status,
+    statusText: payload.statusText,
+    headers: payload.headers,
+  })
+}
+
+export async function writeOfflineNavigationRSCResponseCacheEntry({
+  payload,
+  ...entry
+}: OfflineNavigationRSCResponseCacheWrite): Promise<boolean> {
+  const resolvedPayload = await payload
+  if (resolvedPayload === null) {
+    return false
+  }
+
+  return writeOfflineNavigationCacheEntry({
+    ...entry,
+    payload: resolvedPayload,
+  })
+}
+
 function getCacheBuildId(buildId: string | undefined): string | null {
   const cacheBuildId = buildId ?? getNavigationBuildId()
   return cacheBuildId === '' ? null : cacheBuildId