Expire loading state cache separately from cache node data

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

@@ -108,8 +108,10 @@ describe('createInitialRouterState', () => {
             prefetchTime: expect.any(Number),
             kind: PrefetchKind.AUTO,
             lastUsedTime: null,
+            renewalTime: null,
             treeAtTimeOfPrefetch: initialTree,
             status: PrefetchCacheEntryStatus.fresh,
+            loadingStatus: null,
           },
         ],
       ]),

packages/next/src/client/components/router-reducer/fill-cache-with-data-property.ts

@@ -67,6 +67,7 @@ export function fillCacheWithDataProperty(
       lazyData: childCacheNode.lazyData,
       rsc: childCacheNode.rsc,
       prefetchRsc: childCacheNode.prefetchRsc,
+      loading: childCacheNode.loading,
       parallelRoutes: new Map(childCacheNode.parallelRoutes),
     } as CacheNode
     childSegmentMap.set(cacheKey, childCacheNode)

packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.ts

@@ -6,7 +6,10 @@ import type {
 import { invalidateCacheByRouterState } from './invalidate-cache-by-router-state'
 import { fillLazyItemsTillLeafWithHead } from './fill-lazy-items-till-leaf-with-head'
 import { createRouterCacheKey } from './create-router-cache-key'
-import type { PrefetchCacheEntry } from './router-reducer-types'
+import {
+  PrefetchCacheEntryStatus,
+  type PrefetchCacheEntry,
+} from './router-reducer-types'
 
 /**
  * Fill cache with rsc based on flightDataPath
@@ -49,11 +52,18 @@ export function fillCacheWithNewSubTreeData(
       const seedData: CacheNodeSeedData = flightDataPath[3]
       const rsc = seedData[2]
       const loading = seedData[3]
+      const canReuseLoadingState =
+        prefetchEntry?.loadingStatus === PrefetchCacheEntryStatus.reusable
+
       childCacheNode = {
         lazyData: null,
         rsc,
         prefetchRsc: null,
-        loading,
+        // Preserve the existing loading node if it exists & is reusable
+        loading:
+          canReuseLoadingState && existingChildCacheNode?.loading
+            ? existingChildCacheNode.loading
+            : loading,
         // Ensure segments other than the one we got data for are preserved.
         parallelRoutes: existingChildCacheNode
           ? new Map(existingChildCacheNode.parallelRoutes)

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

@@ -72,6 +72,9 @@ export function getOrCreatePrefetchCacheEntry({
   if (existingCacheEntry) {
     // Grab the latest status of the cache entry and update it
     existingCacheEntry.status = getPrefetchEntryCacheStatus(existingCacheEntry)
+    existingCacheEntry.loadingStatus = getLoadingCacheStatus(
+      existingCacheEntry.renewalTime
+    )
 
     // 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
@@ -91,6 +94,7 @@ export function getOrCreatePrefetchCacheEntry({
         buildId,
         nextUrl,
         prefetchCache,
+        isRenewal: true,
         // 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.
@@ -174,8 +178,10 @@ export function createPrefetchCacheEntryForInitialLoad({
     kind,
     prefetchTime: Date.now(),
     lastUsedTime: null,
+    renewalTime: null,
     key: prefetchCacheKey,
     status: PrefetchCacheEntryStatus.fresh,
+    loadingStatus: null,
   }
 
   prefetchCache.set(prefetchCacheKey, prefetchEntry)
@@ -193,12 +199,14 @@ function createLazyPrefetchEntry({
   nextUrl,
   buildId,
   prefetchCache,
+  isRenewal,
 }: Pick<
   ReadonlyReducerState,
   'nextUrl' | 'tree' | 'buildId' | 'prefetchCache'
 > & {
   url: URL
   kind: PrefetchKind
+  isRenewal?: boolean
 }): PrefetchCacheEntry {
   const prefetchCacheKey = createPrefetchCacheKey(url)
 
@@ -226,8 +234,10 @@ function createLazyPrefetchEntry({
     kind,
     prefetchTime: Date.now(),
     lastUsedTime: null,
+    renewalTime: isRenewal ? Date.now() : null,
     key: prefetchCacheKey,
     status: PrefetchCacheEntryStatus.fresh,
+    loadingStatus: PrefetchCacheEntryStatus.fresh,
   }
 
   prefetchCache.set(prefetchCacheKey, prefetchEntry)
@@ -251,6 +261,27 @@ export function prunePrefetchCache(
 const FIVE_MINUTES = 5 * 60 * 1000
 const THIRTY_SECONDS = 30 * 1000
 
+/**
+ * This function is used to determine the cache status of the loading state of a prefetch cache entry.
+ */
+function getLoadingCacheStatus(time: number | null) {
+  // a null value here means the time entry hasn't yet been renewed
+  // therefore we assume it's fresh
+  if (!time) {
+    return PrefetchCacheEntryStatus.fresh
+  }
+
+  // once renewed, the loading state can be reused for up to 5 minutes
+  if (Date.now() < time + FIVE_MINUTES) {
+    return PrefetchCacheEntryStatus.reusable
+  }
+
+  return PrefetchCacheEntryStatus.expired
+}
+
+/**
+ * This function is used to determine the cache status of the data of a prefetch cache entry.
+ */
 function getPrefetchEntryCacheStatus({
   kind,
   prefetchTime,
@@ -263,14 +294,14 @@ function getPrefetchEntryCacheStatus({
       : PrefetchCacheEntryStatus.fresh
   }
 
-  // if the cache entry was prefetched less than 5 mins ago, then we want to re-use only the loading state
+  // if the cache entry was prefetched greater than 30s ago but less than 5 mins ago, then it's stale
   if (kind === 'auto') {
     if (Date.now() < prefetchTime + FIVE_MINUTES) {
       return PrefetchCacheEntryStatus.stale
     }
   }
 
-  // if the cache entry was prefetched less than 5 mins ago and was a "full" prefetch, then we want to re-use it "full
+  // if the cache entry was prefetched less than 5 mins ago and was a "full" prefetch, then we want to re-use it
   if (kind === 'full') {
     if (Date.now() < prefetchTime + FIVE_MINUTES) {
       return PrefetchCacheEntryStatus.reusable

packages/next/src/client/components/router-reducer/router-reducer-types.ts

@@ -204,8 +204,10 @@ export type PrefetchCacheEntry = {
   kind: PrefetchKind
   prefetchTime: number
   lastUsedTime: number | null
+  renewalTime: number | null
   key: string
   status: PrefetchCacheEntryStatus
+  loadingStatus: PrefetchCacheEntryStatus | null
 }
 
 export enum PrefetchCacheEntryStatus {

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

@@ -373,9 +373,7 @@ createNextDescribe(
           expect(newNumber).toBe(initialNumber)
         })
 
-        // TODO: Rather than reusing parts of a stale prefetch cache entry to make this work,
-        // we should be able to copy over the existing loading from a previous cache node on navigation.
-        it.skip('should refetch below the fold after 30 seconds', async () => {
+        it('should refetch below the fold after 30 seconds', async () => {
           const randomLoadingNumber = await browser
             .elementByCss('[href="/1?timeout=1000"]')
             .click()