Wrong segment rendered when quickly reload page and navigate through browser history in Next.js 13+.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.5k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/snowy-platform-7k39wy
To Reproduce
- Run the preview of provided SandBox code.
- Open it in a separate browser tab.
- Navigate between
Page 1andPage 2routes to createwindow.history recordsto be able to go back viabrowser arrow. - Try to
reloadpage viabrowser reload buttonorkeyboardandgo backtoprevious route(make it as fast as possible) - If you did it fast enough you can see
updated URLand the content from previous page (segment) . - If you did it not fast enough you can try it again from
step 3.
Current vs. Expected behavior
Actual result: page content is still from previous route and URL is correct.
Expected result: page content where I go back and URL must be correct.
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Available memory (MB): 4102
Available CPU cores: 2
Binaries:
Node: 20.9.0
npm: 9.8.1
Yarn: 1.22.19
pnpm: 8.10.2
Relevant Packages:
next: 15.0.0-canary.132 // Latest available version is detected (15.0.0-canary.132).
eslint-config-next: N/A
react: 19.0.0-rc-eb3ad065-20240822
react-dom: 19.0.0-rc-eb3ad065-20240822
typescript: 5.3.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Navigation, Pages Router
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local), Vercel (Deployed), Other (Deployed)
Additional context
That issue exists in all Next.js 13+ that I tried to reproduce bug.
- Our QA firstly found it in our self-deploy website, then I checked official Next.js examples and official Vercel website(I suppose it uses last Next.js version). Also I tried Sandbox with minimal app configuration. The problem was reproduced on each case.
- Then I tried to reproduce it in our self-deploy project that uses
Next.js 12and the issue doesn't exist there.
Here is the screen record from official Vercel website that also reproduces that issue.
Current way to fix.
To fix that bug, I check for actual rendered segment, then check for what actually I have in URL and use router.push to URL with rendered segment. As I tested it's not possible to correctly change segment according to URL but it's possible to change URL according to rendered segment. But you need to configure that logic manually for a lot of segments so it's not the best option of course but at least we show correct content and URL for user.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the provided CodeSandbox reproduction and exercising the Pages Router with rapid reload and browser-history navigation. Trace the navigation and history handling involved in the reproduction; done means the URL and rendered page segment remain synchronized across the reported sequence in next dev, next start, and deployed environments.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100