Match data fetch and busting cache key when path URI encodes

packages/next/shared/lib/router/router.ts

@@ -497,6 +497,7 @@ function withMiddlewareEffects<T extends FetchDataOutput>(
           getMiddlewareData(data.dataHref, data.response, options).then(
             (effect) => ({
               dataHref: data.dataHref,
+              cacheKey: data.cacheKey,
               json: data.json,
               response: data.response,
               text: data.text,
@@ -639,6 +640,7 @@ interface FetchDataOutput {
   json: Record<string, any> | null
   response: Response
   text: string
+  cacheKey: string
 }
 
 interface FetchNextDataParams {
@@ -680,7 +682,7 @@ function fetchNextData({
     })
       .then((response) => {
         if (response.ok && params?.method === 'HEAD') {
-          return { dataHref, response, text: '', json: {} }
+          return { dataHref, response, text: '', json: {}, cacheKey }
         }
 
         return response.text().then((text) => {
@@ -695,7 +697,7 @@ function fetchNextData({
               hasMiddleware &&
               [301, 302, 307, 308].includes(response.status)
             ) {
-              return { dataHref, response, text, json: {} }
+              return { dataHref, response, text, json: {}, cacheKey }
             }
 
             if (!hasMiddleware && response.status === 404) {
@@ -705,6 +707,7 @@ function fetchNextData({
                   json: { notFound: SSG_DATA_NOT_FOUND },
                   response,
                   text,
+                  cacheKey,
                 }
               }
             }
@@ -728,6 +731,7 @@ function fetchNextData({
             json: parseJSON ? tryToParseAsJSON(text) : null,
             response,
             text,
+            cacheKey,
           }
         })
       })
@@ -2014,9 +2018,9 @@ export default class Router implements BaseRouter {
       const shouldFetchData =
         routeInfo.__N_SSG || routeInfo.__N_SSP || routeInfo.__N_RSC
 
-      const { props } = await this._getData(async () => {
+      const { props, cacheKey } = await this._getData(async () => {
         if (shouldFetchData && !useStreamedFlightData) {
-          const { json } = data?.json
+          const { json, cacheKey: _cacheKey } = data?.json
             ? data
             : await fetchNextData({
                 dataHref: this.pageLoader.getDataHref({
@@ -2033,12 +2037,14 @@ export default class Router implements BaseRouter {
               })
 
           return {
+            cacheKey: _cacheKey,
             props: json || {},
           }
         }
 
         return {
           headers: {},
+          cacheKey: '',
           props: await this.getInitialProps(
             routeInfo.Component,
             // we provide AppTree later so this needs to be `any`
@@ -2058,10 +2064,6 @@ export default class Router implements BaseRouter {
       // middleware can skip cache per request with
       // x-middleware-cache: no-cache as well
       if (routeInfo.__N_SSP && fetchNextDataParams.dataHref) {
-        const cacheKey = new URL(
-          fetchNextDataParams.dataHref,
-          window.location.href
-        ).href
         delete this.sdc[cacheKey]
       }
 

test/e2e/dynamic-route-interpolation/index.test.ts

@@ -2,6 +2,7 @@ import { createNext } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import { renderViaHTTP } from 'next-test-utils'
 import cheerio from 'cheerio'
+import webdriver from 'next-webdriver'
 
 describe('Dynamic Route Interpolation', () => {
   let next: NextInstance
@@ -10,22 +11,31 @@ describe('Dynamic Route Interpolation', () => {
     next = await createNext({
       files: {
         'pages/blog/[slug].js': `
+          import Link from "next/link"
+          import { useRouter } from "next/router"
+
           export function getServerSideProps({ params }) {
-            return { props: { slug: params.slug } }
+            return { props: { slug: params.slug, now: Date.now() } }
           }
 
           export default function Page(props) { 
-            return <p id="slug">{props.slug}</p>
+            const router = useRouter()
+            return (
+              <>
+                <p id="slug">{props.slug}</p>
+                <Link href={router.asPath}>
+                  <a id="now">{props.now}</a>
+                </Link>
+              </>
+            )
           }
-
         `,
 
         'pages/api/dynamic/[slug].js': `
           export default function Page(req, res) { 
             const { slug } = req.query
             res.end('slug: ' + slug)
           }
-
         `,
       },
       dependencies: {},
@@ -60,4 +70,22 @@ describe('Dynamic Route Interpolation', () => {
     const text = await renderViaHTTP(next.url, '/api/dynamic/[abc]')
     expect(text).toBe('slug: [abc]')
   })
+
+  it('should bust data cache', async () => {
+    const browser = await webdriver(next.url, '/blog/login')
+    await browser.elementById('now').click() // fetch data once
+    const text = await browser.elementById('now').text()
+    await browser.elementById('now').click() // fetch data again
+    await browser.waitForElementByCss(`#now:not(:text("${text}"))`)
+    await browser.close()
+  })
+
+  it('should bust data cache with symbol', async () => {
+    const browser = await webdriver(next.url, '/blog/@login')
+    await browser.elementById('now').click() // fetch data once
+    const text = await browser.elementById('now').text()
+    await browser.elementById('now').click() // fetch data again
+    await browser.waitForElementByCss(`#now:not(:text("${text}"))`)
+    await browser.close()
+  })
 })