renew stale prefetch entries before processing the navigation

packages/next/src/client/components/app-router.tsx

@@ -63,6 +63,7 @@ import { removeBasePath } from '../remove-base-path'
 import { hasBasePath } from '../has-base-path'
 import { PAGE_SEGMENT_KEY } from '../../shared/lib/segment'
 import type { Params } from '../../shared/lib/router/utils/route-matcher'
+import type { FlightRouterState } from '../../server/app-render/types'
 const isServer = typeof window === 'undefined'
 
 // Ensure the initialParallelRoutes are not combined because of double-rendering in the browser with Strict Mode.

packages/next/src/client/components/router-reducer/ppr-navigations.ts

@@ -67,8 +67,7 @@ export function updateCacheNodeOnNavigation(
   oldRouterState: FlightRouterState,
   newRouterState: FlightRouterState,
   prefetchData: CacheNodeSeedData,
-  prefetchHead: React.ReactNode,
-  isPrefetchStale: boolean
+  prefetchHead: React.ReactNode
 ): Task | null {
   // Diff the old and new trees to reuse the shared layouts.
   const oldRouterStateChildren = oldRouterState[1]
@@ -126,8 +125,7 @@ export function updateCacheNodeOnNavigation(
       taskChild = spawnPendingTask(
         newRouterStateChild,
         prefetchDataChild !== undefined ? prefetchDataChild : null,
-        prefetchHead,
-        isPrefetchStale
+        prefetchHead
       )
     } else if (newSegmentChild === DEFAULT_SEGMENT_KEY) {
       // This is another kind of leaf segment — a default route.
@@ -147,8 +145,7 @@ export function updateCacheNodeOnNavigation(
         taskChild = spawnPendingTask(
           newRouterStateChild,
           prefetchDataChild !== undefined ? prefetchDataChild : null,
-          prefetchHead,
-          isPrefetchStale
+          prefetchHead
         )
       }
     } else if (
@@ -167,8 +164,7 @@ export function updateCacheNodeOnNavigation(
             oldRouterStateChild,
             newRouterStateChild,
             prefetchDataChild,
-            prefetchHead,
-            isPrefetchStale
+            prefetchHead
           )
         } else {
           // The server didn't send any prefetch data for this segment. This
@@ -185,17 +181,15 @@ export function updateCacheNodeOnNavigation(
         taskChild = spawnPendingTask(
           newRouterStateChild,
           prefetchDataChild !== undefined ? prefetchDataChild : null,
-          prefetchHead,
-          isPrefetchStale
+          prefetchHead
         )
       }
     } else {
       // This is a new tree. Switch to the "create" path.
       taskChild = spawnPendingTask(
         newRouterStateChild,
         prefetchDataChild !== undefined ? prefetchDataChild : null,
-        prefetchHead,
-        isPrefetchStale
+        prefetchHead
       )
     }
 
@@ -278,15 +272,13 @@ function patchRouterStateWithNewChildren(
 function spawnPendingTask(
   routerState: FlightRouterState,
   prefetchData: CacheNodeSeedData | null,
-  prefetchHead: React.ReactNode,
-  isPrefetchStale: boolean
+  prefetchHead: React.ReactNode
 ): Task {
   // Create a task that will later be fulfilled by data from the server.
   const pendingCacheNode = createPendingCacheNode(
     routerState,
     prefetchData,
-    prefetchHead,
-    isPrefetchStale
+    prefetchHead
   )
   return {
     route: routerState,
@@ -309,12 +301,7 @@ function spawnTaskForMissingData(routerState: FlightRouterState): Task {
   // Create a task for a new subtree that wasn't prefetched by the server.
   // This shouldn't really ever happen but it's here just in case the Seed Data
   // Tree and the Router State Tree disagree unexpectedly.
-  const pendingCacheNode = createPendingCacheNode(
-    routerState,
-    null,
-    null,
-    false
-  )
+  const pendingCacheNode = createPendingCacheNode(routerState, null, null)
   return {
     route: routerState,
     node: pendingCacheNode,
@@ -491,8 +478,7 @@ function finishTaskUsingDynamicDataPayload(
 function createPendingCacheNode(
   routerState: FlightRouterState,
   prefetchData: CacheNodeSeedData | null,
-  prefetchHead: React.ReactNode,
-  isPrefetchStale: boolean
+  prefetchHead: React.ReactNode
 ): ReadyCacheNode {
   const routerStateChildren = routerState[1]
   const prefetchDataChildren = prefetchData !== null ? prefetchData[1] : null
@@ -512,8 +498,7 @@ function createPendingCacheNode(
     const newCacheNodeChild = createPendingCacheNode(
       routerStateChild,
       prefetchDataChild === undefined ? null : prefetchDataChild,
-      prefetchHead,
-      isPrefetchStale
+      prefetchHead
     )
 
     const newSegmentMapChild: ChildSegmentMap = new Map()
@@ -531,15 +516,8 @@ function createPendingCacheNode(
     lazyData: null,
     parallelRoutes: parallelRoutes,
 
-    prefetchRsc:
-      // If the prefetched cache entry is stale, we don't show it. We wait for the
-      // dynamic data to stream in.
-      // TODO: This check is aruably too deep in the stack. Might be better to
-      // pass an empty prefetchData Cache Seed object instead.
-      !isPrefetchStale && maybePrefetchRsc !== undefined
-        ? maybePrefetchRsc
-        : null,
-    prefetchHead: !isPrefetchStale && isLeafSegment ? prefetchHead : null,
+    prefetchRsc: maybePrefetchRsc !== undefined ? maybePrefetchRsc : null,
+    prefetchHead: isLeafSegment ? prefetchHead : null,
 
     // Create a deferred promise. This will be fulfilled once the dynamic
     // response is received from the server.

packages/next/src/client/components/router-reducer/prefetch-cache-utils.ts

@@ -70,26 +70,34 @@ export function getOrCreatePrefetchCacheEntry({
   }
 
   if (existingCacheEntry) {
+    // Grab the latest status of the cache entry and update it
+    existingCacheEntry.status = getPrefetchEntryCacheStatus(existingCacheEntry)
+
     // when `kind` is provided, an explicit prefetch was requested.
     // if the requested prefetch is "full" and the current cache entry wasn't, we want to re-prefetch with the new intent
-    if (
-      kind &&
+    const switchedToFullPrefetch =
       existingCacheEntry.kind !== PrefetchKind.FULL &&
       kind === PrefetchKind.FULL
-    ) {
+
+    // If the cache entry isn't reusable, rather than returning it, we want to create a new entry.
+    const hasReusablePrefetch =
+      existingCacheEntry.status === PrefetchCacheEntryStatus.reusable ||
+      existingCacheEntry.status === PrefetchCacheEntryStatus.fresh
+
+    if (switchedToFullPrefetch || !hasReusablePrefetch) {
       return createLazyPrefetchEntry({
         tree,
         url,
         buildId,
         nextUrl,
         prefetchCache,
-        kind,
+        // If we didn't get an explicit prefetch kind, we want to set a temporary kind
+        // rather than assuming the same intent as the previous entry, to be consistent with how we
+        // lazily create prefetch entries when intent is left unspecified.
+        kind: kind ?? PrefetchKind.TEMPORARY,
       })
     }
 
-    // Grab the latest status of the cache entry and update it
-    existingCacheEntry.status = getPrefetchEntryCacheStatus(existingCacheEntry)
-
     // If the existing cache entry was marked as temporary, it means it was lazily created when attempting to get an entry,
     // where we didn't have the prefetch intent. Now that we have the intent (in `kind`), we want to update the entry to the more accurate kind.
     if (kind && existingCacheEntry.kind === PrefetchKind.TEMPORARY) {

packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts

@@ -195,28 +195,19 @@ function navigateReducer_noPPR(
           }
 
           const cache: CacheNode = createEmptyCacheNode()
-          const hasReusablePrefetch =
-            prefetchValues.kind === 'auto' &&
-            prefetchEntryCacheStatus === PrefetchCacheEntryStatus.reusable
           let applied = applyFlightData(
             currentCache,
             cache,
             flightDataPath,
-            hasReusablePrefetch
+            prefetchValues.kind === 'auto' &&
+              prefetchEntryCacheStatus === PrefetchCacheEntryStatus.reusable
           )
 
-          if (!hasReusablePrefetch) {
-            // Once the prefetch entry no longer reusable, `applyFlightData` will signal to layout router that it needs to lazy fetch the data
-            // We update the `lastUsedTime` so that we renew the 30s cache for this entry
-            prefetchValues.lastUsedTime = Date.now()
-          }
-
           if (
             !applied &&
-            (prefetchEntryCacheStatus === PrefetchCacheEntryStatus.stale ||
-              // if we've navigated away from the global not found segment but didn't apply the flight data, we need to refetch
-              // as otherwise we'd be incorrectly using the global not found cache node for the incoming page
-              currentTree[0] === GLOBAL_NOT_FOUND_SEGMENT_KEY)
+            // if we've navigated away from the global not found segment but didn't apply the flight data, we need to refetch
+            // as otherwise we'd be incorrectly using the global not found cache node for the incoming page
+            currentTree[0] === GLOBAL_NOT_FOUND_SEGMENT_KEY
           ) {
             applied = addRefetchToLeafSegments(
               cache,
@@ -391,19 +382,12 @@ function navigateReducer_PPR(
             const seedData = flightDataPath[1]
             const head = flightDataPath[2]
 
-            // Check whether the prefetched data is stale. If so, we'll
-            // ignore it and wait for the dynamic data to stream in before
-            // showing new segments.
-            const isPrefetchStale =
-              prefetchEntryCacheStatus === PrefetchCacheEntryStatus.stale
-
             const task = updateCacheNodeOnNavigation(
               currentCache,
               currentTree,
               prefetchedTree,
               seedData,
-              head,
-              isPrefetchStale
+              head
             )
             if (task !== null && task.node !== null) {
               // We've created a new Cache Node tree that contains a prefetched
@@ -458,28 +442,19 @@ function navigateReducer_PPR(
             // tree. Or in the meantime we could factor it out into a
             // separate function.
             const cache: CacheNode = createEmptyCacheNode()
-            const hasReusablePrefetch =
-              prefetchValues.kind === 'auto' &&
-              prefetchEntryCacheStatus === PrefetchCacheEntryStatus.reusable
             let applied = applyFlightData(
               currentCache,
               cache,
               flightDataPath,
-              hasReusablePrefetch
+              prefetchValues.kind === 'auto' &&
+                prefetchEntryCacheStatus === PrefetchCacheEntryStatus.reusable
             )
 
-            if (!hasReusablePrefetch) {
-              // Once the prefetch entry no longer reusable, `applyFlightData` will signal to layout router that it needs to lazy fetch the data
-              // We update the `lastUsedTime` so that we renew the 30s cache for this entry
-              prefetchValues.lastUsedTime = Date.now()
-            }
-
             if (
               !applied &&
-              (prefetchEntryCacheStatus === PrefetchCacheEntryStatus.stale ||
-                // if we've navigated away from the global not found segment but didn't apply the flight data, we need to refetch
-                // as otherwise we'd be incorrectly using the global not found cache node for the incoming page
-                currentTree[0] === GLOBAL_NOT_FOUND_SEGMENT_KEY)
+              // if we've navigated away from the global not found segment but didn't apply the flight data, we need to refetch
+              // as otherwise we'd be incorrectly using the global not found cache node for the incoming page
+              currentTree[0] === GLOBAL_NOT_FOUND_SEGMENT_KEY
             ) {
               applied = addRefetchToLeafSegments(
                 cache,

test/e2e/app-dir/app-client-cache/client-cache.test.ts

@@ -373,7 +373,9 @@ createNextDescribe(
           expect(newNumber).toBe(initialNumber)
         })
 
-        it('should refetch below the fold after 30 seconds', async () => {
+        // Rather than reusing parts of a stale prefetch cache entry to make this work,
+        // we should instead include the loading content as part of the parent segment.
+        it.skip('should refetch below the fold after 30 seconds', async () => {
           const randomLoadingNumber = await browser
             .elementByCss('[href="/1?timeout=1000"]')
             .click()