offline navigations: support dynamic route patterns (9/10)

Author: feedthejim

packages/next/src/build/define-env.ts

@@ -384,7 +384,9 @@ export function getDefineEnv({
     'process.env.__NEXT_GESTURE_TRANSITION':
       config.experimental.gestureTransition ?? false,
     'process.env.__NEXT_OPTIMISTIC_ROUTING':
-      config.experimental.optimisticRouting ?? false,
+      config.experimental.optimisticRouting ||
+      config.experimental.offlineNavigations ||
+      false,
     'process.env.__NEXT_VARY_PARAMS': config.experimental.varyParams ?? false,
     'process.env.__NEXT_EXPOSE_TESTING_API':
       dev || config.experimental.exposeTestingApiInProductionBuild === true,

packages/next/src/build/templates/app-page.ts

@@ -890,7 +890,8 @@ export async function handler(
             staleTimes: nextConfig.experimental.staleTimes,
             dynamicOnHover: Boolean(nextConfig.experimental.dynamicOnHover),
             optimisticRouting: Boolean(
-              nextConfig.experimental.optimisticRouting
+              nextConfig.experimental.optimisticRouting ||
+                nextConfig.experimental.offlineNavigations
             ),
             inlineCss: Boolean(nextConfig.experimental.inlineCss),
             prefetchInlining: nextConfig.experimental.prefetchInlining ?? false,

packages/next/src/build/templates/edge-ssr-app.ts

@@ -165,7 +165,10 @@ async function requestHandler(
         expireTime: nextConfig.expireTime,
         staleTimes: nextConfig.experimental.staleTimes,
         dynamicOnHover: Boolean(nextConfig.experimental.dynamicOnHover),
-        optimisticRouting: Boolean(nextConfig.experimental.optimisticRouting),
+        optimisticRouting: Boolean(
+          nextConfig.experimental.optimisticRouting ||
+            nextConfig.experimental.offlineNavigations
+        ),
         inlineCss: Boolean(nextConfig.experimental.inlineCss),
         prefetchInlining: nextConfig.experimental.prefetchInlining ?? false,
         authInterrupts: Boolean(nextConfig.experimental.authInterrupts),

packages/next/src/client/route-params.ts

@@ -10,6 +10,8 @@ import {
   NEXT_REWRITTEN_QUERY_HEADER,
   NEXT_RSC_UNION_QUERY,
 } from './components/app-router-headers'
+import { hasBasePath } from './has-base-path'
+import { removeBasePath } from './remove-base-path'
 import type {
   NormalizedPathname,
   NormalizedSearch,
@@ -44,9 +46,14 @@ export function getRenderedPathname(
   // page will be different from the pathname in the request URL. In this case,
   // the response will include a header that gives the rewritten pathname.
   const rewrittenPath = response.headers.get(NEXT_REWRITTEN_PATH_HEADER)
-  return (rewrittenPath ??
-    urlToUrlWithoutFlightMarker(new URL(response.url))
-      .pathname) as NormalizedPathname
+  const pathname =
+    rewrittenPath ?? urlToUrlWithoutFlightMarker(new URL(response.url)).pathname
+  // `response.url` is browser-visible, so it may still include the configured
+  // basePath. Route trees and dynamic param matching use app pathnames without
+  // basePath, matching the server-side params contract.
+  return (
+    hasBasePath(pathname) ? removeBasePath(pathname) : pathname
+  ) as NormalizedPathname
 }
 
 // Pathname parts come from `URL.pathname.split('/')`, so they are already

packages/next/src/export/index.ts

@@ -510,7 +510,10 @@ async function exportAppImpl(
       clientParamParsingOrigins:
         nextConfig.experimental.clientParamParsingOrigins,
       dynamicOnHover: nextConfig.experimental.dynamicOnHover ?? false,
-      optimisticRouting: nextConfig.experimental.optimisticRouting ?? false,
+      optimisticRouting:
+        nextConfig.experimental.optimisticRouting ||
+        nextConfig.experimental.offlineNavigations ||
+        false,
       inlineCss: nextConfig.experimental.inlineCss ?? false,
       prefetchInlining: nextConfig.experimental.prefetchInlining ?? false,
       authInterrupts: !!nextConfig.experimental.authInterrupts,

packages/next/src/server/base-server.ts

@@ -578,7 +578,9 @@ export default abstract class Server<
           this.nextConfig.experimental.clientParamParsingOrigins,
         dynamicOnHover: this.nextConfig.experimental.dynamicOnHover ?? false,
         optimisticRouting:
-          this.nextConfig.experimental.optimisticRouting ?? false,
+          this.nextConfig.experimental.optimisticRouting ||
+          this.nextConfig.experimental.offlineNavigations ||
+          false,
         inlineCss: this.nextConfig.experimental.inlineCss ?? false,
         prefetchInlining:
           this.nextConfig.experimental.prefetchInlining ?? false,

test/production/app-dir/offline-navigations/app/dynamic-prefetch/[value]/dynamic-prefetch-value.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+
+export function DynamicPrefetchValue() {
+  const params = useParams<{ value: string }>()
+
+  return <p id="dynamic-prefetch-page">dynamic prefetch path: {params.value}</p>
+}

test/production/app-dir/offline-navigations/app/dynamic-prefetch/[value]/page.tsx

@@ -0,0 +1,18 @@
+import { Suspense } from 'react'
+import { OfflineStatus } from '../../offline-status'
+import { DynamicPrefetchValue } from './dynamic-prefetch-value'
+
+export function generateStaticParams() {
+  return [{ value: '__TEST__' }]
+}
+
+export default function DynamicPrefetchPage() {
+  return (
+    <>
+      <Suspense fallback={<p>loading dynamic prefetch value</p>}>
+        <DynamicPrefetchValue />
+      </Suspense>
+      <OfflineStatus />
+    </>
+  )
+}

test/production/app-dir/offline-navigations/offline-navigations.test.ts

@@ -353,6 +353,58 @@ describe('offlineNavigations build artifacts', () => {
     })
   }
 
+  async function prefetchDynamicPatternReplayData(
+    browser: Awaited<ReturnType<typeof next.browser>>
+  ) {
+    await browser.elementById('prefetch-dynamic-pattern-source').click()
+    await retry(async () => {
+      const routeRecords =
+        await readPersistedOfflineNavigationRouteRecords(browser)
+      expect(
+        routeRecords.some((record) =>
+          record.route.pathname.includes('/dynamic-prefetch/learned')
+        )
+      ).toBe(true)
+    })
+
+    await browser.elementById('prefetch-dynamic-pattern-target').click()
+    await retry(async () => {
+      const routeRecords =
+        await readPersistedOfflineNavigationRouteRecords(browser)
+      expect(
+        routeRecords.some((record) =>
+          record.route.pathname.includes('/dynamic-prefetch/learned')
+        )
+      ).toBe(true)
+      expect(
+        routeRecords.some((record) =>
+          record.route.pathname.includes('/dynamic-prefetch/replayed')
+        )
+      ).toBe(false)
+
+      const segmentRecords =
+        await readPersistedOfflineNavigationSegmentRecords(browser)
+      const replayedSegmentRecords = segmentRecords.filter((record) =>
+        record.key.includes('replayed')
+      )
+      expect(
+        segmentRecords.some(
+          (record) => record.payload.requestKind === 'segment-prefetch'
+        )
+      ).toBe(true)
+      expect(
+        replayedSegmentRecords.some((record) =>
+          getPersistedSegmentRequestKey(record)?.endsWith('/__PAGE__')
+        )
+      ).toBe(true)
+      expect(
+        replayedSegmentRecords.some((record) =>
+          isPersistedHeadSegmentRecord(record)
+        )
+      ).toBe(true)
+    })
+  }
+
   async function cleanupOfflineNavigationState(
     browser: Awaited<ReturnType<typeof next.browser>>
   ) {
@@ -1368,6 +1420,131 @@ describe('offlineNavigations build artifacts', () => {
     }
   })
 
+  it('replays a dynamic route from persisted known route patterns', async () => {
+    const buildResult = await next.build()
+    expect(buildResult.exitCode).toBe(0)
+
+    await next.start({ skipBuild: true })
+
+    let page: Playwright.Page | undefined
+    try {
+      const browser = await next.browser('/docs', {
+        beforePageLoad(p: Playwright.Page) {
+          page = p
+        },
+      })
+      await waitForOfflineNavigationServiceWorker(browser, page!)
+
+      await prefetchDynamicPatternReplayData(browser)
+      await retry(async () => {
+        const routeRecords =
+          await readPersistedOfflineNavigationRouteRecords(browser)
+        expect(
+          routeRecords.some((record) =>
+            record.route.pathname.includes('/dynamic-prefetch/replayed')
+          )
+        ).toBe(false)
+      })
+      await retry(async () => {
+        const cacheState = await readOfflineNavigationCacheState(browser)
+        expect(cacheState.entries).toEqual(
+          expect.arrayContaining([
+            {
+              cacheName: expect.stringMatching(/^next-offline-navigation-v1:/),
+              pathname: expect.stringMatching(
+                /^\/app-assets\/_next\/static\/(?:immutable\/)?chunks\/.+\.js$/
+              ),
+            },
+          ])
+        )
+      })
+
+      const session = await (
+        page!.context() as Playwright.BrowserContext & {
+          newCDPSession: (page: Playwright.Page) => Promise<{
+            send: (method: string) => Promise<void>
+            detach: () => Promise<void>
+          }>
+        }
+      ).newCDPSession(page!)
+
+      try {
+        await session.send('Network.clearBrowserCache')
+      } finally {
+        await session.detach()
+      }
+
+      await next.stop()
+      await page!.context().setOffline(true)
+      const dynamicReplayResponse = await page!.goto(
+        `${next.url}/docs/dynamic-prefetch/replayed#restored`,
+        { waitUntil: 'domcontentloaded' }
+      )
+      expect(dynamicReplayResponse?.status()).toBe(200)
+      await retry(async () => {
+        expect(await browser.elementById('dynamic-prefetch-page').text()).toBe(
+          'dynamic prefetch path: replayed'
+        )
+      })
+    } finally {
+      if (page) {
+        await page.context().setOffline(false)
+      }
+      await next.stop()
+    }
+  })
+
+  it('misses dynamic route pattern replay when a required segment record is missing', async () => {
+    const buildResult = await next.build()
+    expect(buildResult.exitCode).toBe(0)
+
+    await next.start({ skipBuild: true })
+
+    let page: Playwright.Page | undefined
+    try {
+      const browser = await next.browser('/docs', {
+        beforePageLoad(p: Playwright.Page) {
+          page = p
+        },
+      })
+      await waitForOfflineNavigationServiceWorker(browser, page!)
+
+      await prefetchDynamicPatternReplayData(browser)
+
+      const deletedSegments =
+        await deletePersistedOfflineNavigationSegmentRecords(browser, {
+          keySubstring: 'replayed',
+          requestKeySuffix: '/__PAGE__',
+        })
+      expect(deletedSegments).toBeGreaterThan(0)
+      await retry(async () => {
+        const segmentRecords =
+          await readPersistedOfflineNavigationSegmentRecords(browser)
+        expect(
+          segmentRecords.some(
+            (record) =>
+              record.key.includes('replayed') &&
+              getPersistedSegmentRequestKey(record)?.endsWith('/__PAGE__')
+          )
+        ).toBe(false)
+      })
+
+      await next.stop()
+      await page!.context().setOffline(true)
+      const missingSegmentResponse = await page!.goto(
+        `${next.url}/docs/dynamic-prefetch/replayed#missing-segment`,
+        { waitUntil: 'domcontentloaded' }
+      )
+      expect(missingSegmentResponse?.status()).toBe(200)
+      await expectOfflineNavigationCacheMiss(browser, 'missing-segment')
+    } finally {
+      if (page) {
+        await page.context().setOffline(false)
+      }
+      await next.stop()
+    }
+  })
+
   it('does not emit offline navigation artifacts when disabled', async () => {
     await next.patchFile('next.config.js', (content) =>
       content.replace('offlineNavigations: true', 'offlineNavigations: false')