Page was incorrectly cached when Route parameter contains :

[Coxxs]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 18.4.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.2.3-canary.3
  eslint-config-next: 12.2.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Google Chrome Version 103.0.5060.114 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

npm run build
npm run start

Describe the Bug

When the Route parameter contains the : character, page uses getServerSideProps will be incorrectly cached in the browser by next.js.

This is because an encoding error in cacheKey causing next.js unable to delete _this.sdc[cacheKey] (Server Data Cache)

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

Lines 1841 to 1847 in 13557ea

	if (routeInfo.__N_SSP && fetchNextDataParams.dataHref) {
	const cacheKey = new URL(
	fetchNextDataParams.dataHref,
	window.location.href
	).href
	delete this.sdc[cacheKey]
	}

Expected Behavior

Even if Router parameter contains the : character, page uses getServerSideProps should not be cached.

Link to reproduction

https://next-cache-test-fawn.vercel.app/

To Reproduce

Click the second & fourth link repeatedly, the server generated content will not change because it's cached in browser.

This is only reproducible in production build.

I've disabled the minimize (config.optimization.minimize = false) to make it easy to debug.

Demo: https://next-cache-test-fawn.vercel.app/
Demo source: Coxxs/next-cache-test@fe30c1a

[Coxxs]

[visnup]

Going to attempt to fix this. I think I also narrowed down the regression to #37646, which has related code to what you pointed out.

[GioLogist]

@visnup If it helps, we're experiencing this issue as well. On SSR pages and when the @ is present. It makes the specific query parameter that has @ be removed on subsequent (client-side) navigations.

[visnup]

Yeah, I have a PR for a fix in #39568 (one line?). I don't know how to get more eyes on that. I guess the more upvotes and activity we can get on this issue, the better?

@GioLogist Have you found any good workarounds in the meantime? We're experiencing the exact same issue since we use @ in our URLs a lot.

[Coxxs]

patch-package is a good way to fix your project before next.js merging the PR.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.