Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router Cache entry doesn't work when query params contain %20 #72927

Open
blairmcalpine opened this issue Nov 18, 2024 · 0 comments
Open

Router Cache entry doesn't work when query params contain %20 #72927

blairmcalpine opened this issue Nov 18, 2024 · 0 comments
Assignees
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation. Performance Anything with regards to Next.js performance. Runtime Related to Node.js or Edge Runtime with Next.js.

Comments

@blairmcalpine
Copy link

blairmcalpine commented Nov 18, 2024

Link to the code that reproduces this issue

https://github.com/blairmcalpine/next-router-cache-bug

To Reproduce

  1. Install deps (pnpm i)
  2. Start the application with a production build (pnpm build && pnpm start)
  3. Load localhost:3000, and then open the network tab in browser devtools.
  4. Click "Broken Prefetch", followed by "Broken Push". Notice that there are two RSC network requests, because the initial router cache entry created by the "Broken Prefetch" is missed by the "Broken Push".
  5. Go back to localhost:3000/.
  6. Click "Working Prefetch", followed by "Working Push". Notice there is correctly just one RSC network request, since the router cache entry creating by "Working Prefetch" is properly read by the "Working Push".

Current vs. Expected behavior

Following the steps above, I expect that clicking "Broken Prefetch" followed by "Broken Push" only creates one network request. Instead, it makes two.

Note that the only different between the working and broken prefetch, is that the broken one encodes a space with %20 (specifically the URL is /other?query=a%20b). The working one uses /other?query=a_b (could be a + as well or any other character), which works.

I believe this issue stems from the fact that the RSC request from the "Broken Prefetch" and "Broken Push" contain a + in the network request instead of a %20. I'd assume this means when the "Broken Push" looks up the cache entry, it uses %20, but the cache entry added by the "Broken Prefetch" contains a +.

I'd assume this can likely be fixed by no longer replacing the %20 in the query parameters with a + when doing the RSC request (which presumably occurs at some point if the query params are parsed into an object and then back to a string using URLSearchParams.toString).

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Wed Jul 31 20:49:39 PDT 2024; root:xnu-10063.141.1.700.5~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 4.4.0
  pnpm: 9.7.0
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation, Performance, Runtime

Which stage(s) are affected? (Select all that apply)

next start (local), Vercel (Deployed), Other (Deployed)

Additional context

No response

@blairmcalpine blairmcalpine added the bug Issue was opened via the bug report template. label Nov 18, 2024
@github-actions github-actions bot added Navigation Related to Next.js linking (e.g., <Link>) and navigation. Performance Anything with regards to Next.js performance. Runtime Related to Node.js or Edge Runtime with Next.js. labels Nov 18, 2024
@gaojude gaojude self-assigned this Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation. Performance Anything with regards to Next.js performance. Runtime Related to Node.js or Edge Runtime with Next.js.
Projects
None yet
Development

No branches or pull requests

2 participants