Expire loading state cache separately from cache node data

vercel · Feb 22, 2024 · a1a0542 · a1a0542
1 parent 1c7b81e
commit a1a0542
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 7 deletions.
diff --git a/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.ts b/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
+        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)

diff --git a/packages/next/src/client/components/router-reducer/prefetch-cache-utils.ts b/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,24 @@ 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) {
+  if (!time) {
+    return PrefetchCacheEntryStatus.fresh
+  }
+
+  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 +291,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

diff --git a/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.test.tsx b/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.test.tsx
@@ -265,7 +265,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -290,7 +292,9 @@ describe('navigateReducer', () => {
             "key": "/linking/about",
             "kind": "temporary",
             "lastUsedTime": 1690329600000,
+            "loadingStatus": "fresh",
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -492,7 +496,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -517,7 +523,9 @@ describe('navigateReducer', () => {
             "key": "/linking/about",
             "kind": "temporary",
             "lastUsedTime": 1690329600000,
+            "loadingStatus": "fresh",
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -689,7 +697,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -856,7 +866,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1020,7 +1032,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": 1690329600000,
+            "loadingStatus": "fresh",
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1254,7 +1268,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1279,7 +1295,9 @@ describe('navigateReducer', () => {
             "key": "/linking/about",
             "kind": "auto",
             "lastUsedTime": 1690329600000,
+            "loadingStatus": "fresh",
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1545,7 +1563,9 @@ describe('navigateReducer', () => {
             "key": "/parallel-tab-bar",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1578,7 +1598,9 @@ describe('navigateReducer', () => {
             "key": "/parallel-tab-bar/demographics",
             "kind": "temporary",
             "lastUsedTime": 1690329600000,
+            "loadingStatus": "fresh",
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1763,7 +1785,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1959,7 +1983,9 @@ describe('navigateReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -1984,7 +2010,9 @@ describe('navigateReducer', () => {
             "key": "/linking/about",
             "kind": "temporary",
             "lastUsedTime": 1690329600000,
+            "loadingStatus": "fresh",
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",

diff --git a/packages/next/src/client/components/router-reducer/reducers/prefetch-reducer.test.tsx b/packages/next/src/client/components/router-reducer/reducers/prefetch-reducer.test.tsx
@@ -162,8 +162,10 @@ describe('prefetchReducer', () => {
             prefetchTime: expect.any(Number),
             kind: PrefetchKind.AUTO,
             lastUsedTime: null,
+            renewalTime: null,
             treeAtTimeOfPrefetch: initialTree,
             status: PrefetchCacheEntryStatus.fresh,
+            loadingStatus: null,
           },
         ],
         [
@@ -173,8 +175,10 @@ describe('prefetchReducer', () => {
             data: prom,
             kind: PrefetchKind.AUTO,
             lastUsedTime: null,
+            renewalTime: null,
             prefetchTime: expect.any(Number),
             status: PrefetchCacheEntryStatus.fresh,
+            loadingStatus: PrefetchCacheEntryStatus.fresh,
             treeAtTimeOfPrefetch: [
               '',
               {
@@ -331,6 +335,8 @@ describe('prefetchReducer', () => {
       treeAtTimeOfPrefetch: initialTree,
       key: '/linking',
       status: PrefetchCacheEntryStatus.fresh,
+      renewalTime: null,
+      loadingStatus: PrefetchCacheEntryStatus.fresh,
     })
 
     const expectedState: ReturnType<typeof prefetchReducer> = {
@@ -357,6 +363,8 @@ describe('prefetchReducer', () => {
             kind: PrefetchKind.AUTO,
             lastUsedTime: null,
             status: PrefetchCacheEntryStatus.fresh,
+            loadingStatus: PrefetchCacheEntryStatus.fresh,
+            renewalTime: null,
             treeAtTimeOfPrefetch: [
               '',
               {

diff --git a/packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.test.tsx b/packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.test.tsx
@@ -239,7 +239,9 @@ describe('serverPatchReducer', () => {
             "key": "/linking/about",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -492,7 +494,9 @@ describe('serverPatchReducer', () => {
             "key": "/linking",
             "kind": "auto",
             "lastUsedTime": null,
+            "loadingStatus": null,
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",
@@ -522,7 +526,9 @@ describe('serverPatchReducer', () => {
             "key": "/linking/about",
             "kind": "temporary",
             "lastUsedTime": 1690329600000,
+            "loadingStatus": "fresh",
             "prefetchTime": 1690329600000,
+            "renewalTime": null,
             "status": "fresh",
             "treeAtTimeOfPrefetch": [
               "",

diff --git a/packages/next/src/client/components/router-reducer/router-reducer-types.ts b/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 {

diff --git a/test/e2e/app-dir/app-client-cache/client-cache.test.ts b/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()