ensure router cache updates reference the latest cache values

Author: ztanner

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

@@ -167,7 +167,7 @@ function navigateReducer_noPPR(
           updatedCanonicalUrl.split('#', 1)[0]
 
       let currentTree = state.tree
-      const currentCache = state.cache
+      let currentCache = state.cache
       let scrollableSegments: FlightSegmentPath[] = []
       for (const flightDataPath of flightData) {
         const flightSegmentPath = flightDataPath.slice(
@@ -258,6 +258,9 @@ function navigateReducer_noPPR(
             mutable.cache = cache
           } else if (applied) {
             mutable.cache = cache
+            // If we applied the cache, we update the "current cache" value so any other
+            // segments in the FlightDataPath will be able to reference the updated cache.
+            currentCache = cache
           }
 
           currentTree = newTree

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

@@ -7,10 +7,11 @@ import {
   fastForwardTo,
   getPathname,
 } from './test-utils'
+import path from 'path'
 
 describe('app dir client cache semantics (default semantics)', () => {
   const { next, isNextDev } = nextTestSetup({
-    files: __dirname,
+    files: path.join(__dirname, 'fixture', 'regular'),
   })
 
   if (isNextDev) {

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

@@ -1,11 +1,12 @@
 import { nextTestSetup } from 'e2e-utils'
 import { browserConfigWithFixedTime, fastForwardTo } from './test-utils'
 import { findAllTelemetryEvents } from 'next-test-utils'
+import path from 'path'
 
 describe('app dir client cache semantics (experimental staleTimes)', () => {
   describe('dynamic: 0', () => {
     const { next, isNextDev } = nextTestSetup({
-      files: __dirname,
+      files: path.join(__dirname, 'fixture', 'regular'),
       nextConfig: {
         experimental: { staleTimes: { dynamic: 0 } },
       },

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

@@ -7,11 +7,12 @@ import {
   fastForwardTo,
   getPathname,
 } from './test-utils'
+import path from 'path'
 
 // This preserves existing tests for the 30s/5min heuristic (previous router defaults)
 describe('app dir client cache semantics (30s/5min)', () => {
   const { next, isNextDev } = nextTestSetup({
-    files: __dirname,
+    files: path.join(__dirname, 'fixture', 'regular'),
     nextConfig: {
       experimental: { staleTimes: { dynamic: 30, static: 180 } },
     },

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

@@ -0,0 +1,81 @@
+import { nextTestSetup } from 'e2e-utils'
+import { check } from 'next-test-utils'
+import { BrowserInterface } from 'next-webdriver'
+import {
+  browserConfigWithFixedTime,
+  createRequestsListener,
+  fastForwardTo,
+  getPathname,
+} from './test-utils'
+import path from 'path'
+
+describe('app dir client cache with parallel routes', () => {
+  const { next } = nextTestSetup({
+    files: path.join(__dirname, 'fixtures', 'parallel-routes'),
+  })
+
+  describe('prefetch={true}', () => {
+    let browser: BrowserInterface
+
+    beforeEach(async () => {
+      browser = (await next.browser(
+        '/',
+        browserConfigWithFixedTime
+      )) as BrowserInterface
+    })
+
+    it('should prefetch the full page', async () => {
+      const { getRequests, clearRequests } =
+        await createRequestsListener(browser)
+      await check(() => {
+        return getRequests().some(
+          ([url, didPartialPrefetch]) =>
+            getPathname(url) === '/0' && !didPartialPrefetch
+        )
+          ? 'success'
+          : 'fail'
+      }, 'success')
+
+      clearRequests()
+
+      await browser
+        .elementByCss('[href="/0"]')
+        .click()
+        .waitForElementByCss('#random-number')
+
+      expect(getRequests().every(([url]) => getPathname(url) !== '/0')).toEqual(
+        true
+      )
+    })
+
+    it('should re-use the cache for the full page, only for 5 mins', async () => {
+      const randomNumber = await browser
+        .elementByCss('[href="/0"]')
+        .click()
+        .waitForElementByCss('#random-number')
+        .text()
+
+      await browser.elementByCss('[href="/"]').click()
+
+      const number = await browser
+        .elementByCss('[href="/0"]')
+        .click()
+        .waitForElementByCss('#random-number')
+        .text()
+
+      expect(number).toBe(randomNumber)
+
+      await browser.eval(fastForwardTo, 5 * 60 * 1000)
+
+      await browser.elementByCss('[href="/"]').click()
+
+      const newNumber = await browser
+        .elementByCss('[href="/0"]')
+        .click()
+        .waitForElementByCss('#random-number')
+        .text()
+
+      expect(newNumber).not.toBe(randomNumber)
+    })
+  })
+})

test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/@breadcrumbs/[id]/page.js

@@ -0,0 +1,7 @@
+export default function Page({ params }) {
+  return (
+    <div>
+      Catchall <pre>{JSON.stringify(params)}</pre>{' '}
+    </div>
+  )
+}

test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/@breadcrumbs/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Root Breadcrumb</div>
+}

test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/[id]/page.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export default async function Page() {
+  const randomNumber = await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(Math.random())
+    }, 1000)
+  })
+
+  return (
+    <>
+      <div>
+        <Link href="/">Back to Home</Link>
+      </div>
+      <div id="random-number">{randomNumber}</div>
+    </>
+  )
+}

test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/layout.js

@@ -0,0 +1,12 @@
+export default function Root({ children, breadcrumbs }) {
+  return (
+    <html>
+      <head></head>
+      <body>
+        <div>{breadcrumbs}</div>
+        <div id="root-layout">Root Layout</div>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/page.js

@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <Link href="/0" prefetch={true}>
+        To Dynamic Page
+      </Link>
+    </div>
+  )
+}