offline navigations: replay dynamic routes from known routes (22/25)

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/components/segment-cache/cache.ts

@@ -125,7 +125,11 @@ import { PAGE_SEGMENT_KEY } from '../../../shared/lib/segment'
 import { FetchStrategy } from './types'
 import { createPromiseWithResolvers } from '../../../shared/lib/promise-with-resolvers'
 import { readFromBFCache, UnknownDynamicStaleTime } from './bfcache'
-import { discoverKnownRoute, matchKnownRoute } from './optimistic-routes'
+import {
+  discoverKnownRoute,
+  matchKnownRoute,
+  restoreKnownRouteFromCacheEntry,
+} from './optimistic-routes'
 import { convertServerPatchToFullTree, type NavigationSeed } from './navigation'
 import { getNavigationBuildId } from '../../navigation-build-id'
 import { NEXT_NAV_DEPLOYMENT_ID_HEADER } from '../../../lib/constants'
@@ -1442,7 +1446,14 @@ export async function hydrateOfflineNavigationRouterCacheFromRecords(
   }
 
   for (const record of routeRecords) {
-    if (writeOfflineNavigationRouteRecordIntoCache(now, record)) {
+    const entry = writeOfflineNavigationRouteRecordIntoCache(now, record)
+    if (entry !== null) {
+      restoreKnownRouteFromCacheEntry(
+        now,
+        record.route.pathname,
+        record.route.nextUrl,
+        entry
+      )
       result.routes.hydrated++
     } else {
       result.routes.skipped++
@@ -1463,7 +1474,7 @@ export async function hydrateOfflineNavigationRouterCacheFromRecords(
 export function writeOfflineNavigationRouteRecordIntoCache(
   now: number,
   record: OfflineNavigationRouteRecord
-): boolean {
+): FulfilledRouteCacheEntry | null {
   const route = record.route
   if (
     record.staleAt <= now ||
@@ -1473,16 +1484,19 @@ export function writeOfflineNavigationRouteRecordIntoCache(
     record.metadata === null ||
     typeof route.canonicalUrl !== 'string' ||
     typeof route.renderedSearch !== 'string' ||
+    typeof route.pathname !== 'string' ||
+    typeof route.search !== 'string' ||
+    (route.nextUrl !== null && typeof route.nextUrl !== 'string') ||
     typeof route.couldBeIntercepted !== 'boolean' ||
     typeof route.supportsPerSegmentPrefetching !== 'boolean' ||
     typeof route.hasDynamicRewrite !== 'boolean'
   ) {
-    return false
+    return null
   }
 
   const varyPath = deserializeOfflineNavigationVaryPath(record.routeVaryPath)
   if (varyPath === null) {
-    return false
+    return null
   }
 
   const fulfilledEntry: FulfilledRouteCacheEntry = {
@@ -1507,7 +1521,7 @@ export function writeOfflineNavigationRouteRecordIntoCache(
     fulfilledEntry,
     isRevalidation
   )
-  return true
+  return fulfilledEntry
 }
 
 export async function writeOfflineNavigationSegmentRecordIntoCache(

packages/next/src/client/components/segment-cache/optimistic-routes.ts

@@ -54,6 +54,8 @@ import {
   createMetadataRouteTree,
 } from './cache'
 import { isValueExpired } from './cache-map'
+import { hasBasePath } from '../../has-base-path'
+import { removeBasePath } from '../../remove-base-path'
 import { doesStaticSegmentAppearInURL } from '../../route-params'
 import type {
   NormalizedNextUrl,
@@ -186,6 +188,10 @@ function createEmptyPart(): KnownRoutePart {
 // The root of the known route tree.
 let knownRouteTreeRoot: KnownRoutePart = createEmptyPart()
 
+function removeBasePathIfPresent(pathname: string): string {
+  return hasBasePath(pathname) ? removeBasePath(pathname) : pathname
+}
+
 /**
  * Learns a route pattern from a server response and inserts it into the cache.
  *
@@ -218,7 +224,8 @@ export function discoverKnownRoute(
 ): FulfilledRouteCacheEntry {
   const tree = routeTree
 
-  const pathnameParts = pathname.split('/').filter((p) => p !== '')
+  const routePathname = removeBasePathIfPresent(pathname)
+  const pathnameParts = routePathname.split('/').filter((p) => p !== '')
   const firstPart = pathnameParts.length > 0 ? pathnameParts[0] : null
   const remainingParts = pathnameParts.length > 0 ? pathnameParts.slice(1) : []
   let fulfilledEntry: FulfilledRouteCacheEntry
@@ -325,6 +332,36 @@ function persistOfflineNavigationRouteRecord(
   })
 }
 
+export function restoreKnownRouteFromCacheEntry(
+  now: number,
+  pathname: string,
+  nextUrl: string | null,
+  entry: FulfilledRouteCacheEntry
+): void {
+  const routePathname = removeBasePathIfPresent(pathname)
+  const pathnameParts = routePathname.split('/').filter((p) => p !== '')
+  const firstPart = pathnameParts.length > 0 ? pathnameParts[0] : null
+  const remainingParts = pathnameParts.length > 0 ? pathnameParts.slice(1) : []
+  const metadataVaryPath = entry.metadata.varyPath as PageVaryPath
+
+  discoverKnownRoutePart(
+    knownRouteTreeRoot,
+    entry.tree,
+    firstPart,
+    remainingParts,
+    entry,
+    now,
+    pathname,
+    nextUrl,
+    entry.tree,
+    metadataVaryPath,
+    entry.couldBeIntercepted,
+    entry.canonicalUrl,
+    entry.supportsPerSegmentPrefetching,
+    entry.hasDynamicRewrite
+  )
+}
+
 /**
  * Gets or creates the dynamic child node for a KnownRoutePart.
  * A node can have at most one dynamic child (you can't have both [slug] and
@@ -574,7 +611,8 @@ export function matchKnownRoute(
   pathname: string,
   search: NormalizedSearch
 ): FulfilledRouteCacheEntry | null {
-  const pathnameParts = pathname.split('/').filter((p) => p !== '')
+  const routePathname = removeBasePathIfPresent(pathname)
+  const pathnameParts = routePathname.split('/').filter((p) => p !== '')
   const resolvedParams: ResolvedParams = new Map()
   const match = matchKnownRoutePart(
     now,

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,11 @@ 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
+  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 />
+    </>
+  )
+}