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

Wrong segment rendered when quickly reload page and navigate through browser history in Next.js 13+. #69401

Open
bohdan-mykhailenko opened this issue Aug 28, 2024 · 4 comments
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation. Pages Router Related to Pages Router.

Comments

@bohdan-mykhailenko
Copy link

bohdan-mykhailenko commented Aug 28, 2024

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/snowy-platform-7k39wy

To Reproduce

  1. Run the preview of provided SandBox code.
  2. Open it in a separate browser tab.
  3. Navigate between Page 1 and Page 2 routes to create window.history records to be able to go back via browser arrow.
  4. Try to reload page via browser reload button or keyboard or and go back to previous route(make it as fast as possible)
  5. If you did it fast enough you can see updated URL and the content from previous page.
  6. 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 place.
  • Then I tried to reproduce in our self-deploy project that uses Next.js 12 and 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.

@bohdan-mykhailenko bohdan-mykhailenko added the bug Issue was opened via the bug report template. label Aug 28, 2024
@github-actions github-actions bot added Navigation Related to Next.js linking (e.g., <Link>) and navigation. Pages Router Related to Pages Router. labels Aug 28, 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. Pages Router Related to Pages Router.
Projects
None yet
Development

No branches or pull requests

4 participants
@bohdan-mykhailenko and others