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

Parallel routes breaks the browser back button, and it happens even on https://nextgram.vercel.app/ #64676

Closed
emp opened this issue Apr 17, 2024 · 3 comments · Fixed by #64692
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. locked

Comments

@emp
Copy link

emp commented Apr 17, 2024

Link to the code that reproduces this issue

https://github.com/vercel/nextgram

To Reproduce

STEPS (the parallel routing example under the vercel github org nextgram is being sent as how to reproduce the issue as happens there as well)

  1. Go to https://nextgram.vercel.app/
  2. Click a photo to open the modal (such as /photos/1)
  3. Press refresh (this shows the in-page render of the /photos/1)
  4. Press back (this shows the homepage again)
  5. Press refresh again
  6. Press forward (the url changes to /photos/1 but no content changes and after a few seconds you get the client-side app crash)

Current vs. Expected behavior

I was experiencing this strange behavior in the parallel routes and I assumed it was due to my app being able to jump from slot route to route without "exiting" the route (such as closing a modal and going back to the initiator page) but I managed to reproduce the issue even on simple modal examples of the feature.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:41:28 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 18.19.1
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: 8.15.7
Relevant Packages:
  next: 14.2.1 // Latest available version is detected (14.2.1).
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Parallel & Intercepting Routes

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

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

Additional context

No response

NEXT-3146

@emp emp added the bug Issue was opened via the bug report template. label Apr 17, 2024
@emp
Copy link
Author

emp commented Apr 17, 2024

Screen.Recording.2024-04-17.at.3.56.05.PM.mov

Adding a video showing the problem

@wyattjoh wyattjoh added linear: next Confirmed issue that is tracked by the Next.js team. Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. area: app labels Apr 17, 2024
@ztanner
Copy link
Member

ztanner commented Apr 17, 2024

Hi @emp! I believe the issue causing the UI to not update & cause the app to crash is fixed on canary.

However, it looks like it incorrectly triggers the route interception when you go "forward". I see the issue, and I'll have a PR shortly to address it :)

ztanner added a commit that referenced this issue Apr 18, 2024
When the router cache can't find a cache node for the requested segment,
it performs a request to the server to get the missing data. This
request to the server currently will always include the `next-url`
header, and on soft-navigations, the router will route the request to
the intercepted handler. This lazy fetch is treated as a soft navigation
by the server, and will incorrectly return data for the intercepted
route.

Similar to the handling in `router.refresh`, and the server action
reducer, we should not include the `next-url` header if there's no
interception route currently in the tree, as otherwise we'll be
erroneously triggering the intercepted route.

Fixes #64676
Closes NEXT-3146
huozhi pushed a commit that referenced this issue Apr 23, 2024
When the router cache can't find a cache node for the requested segment,
it performs a request to the server to get the missing data. This
request to the server currently will always include the `next-url`
header, and on soft-navigations, the router will route the request to
the intercepted handler. This lazy fetch is treated as a soft navigation
by the server, and will incorrectly return data for the intercepted
route.

Similar to the handling in `router.refresh`, and the server action
reducer, we should not include the `next-url` header if there's no
interception route currently in the tree, as otherwise we'll be
erroneously triggering the intercepted route.

Fixes #64676
Closes NEXT-3146
Copy link
Contributor

github-actions bot commented May 3, 2024

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

@github-actions github-actions bot added the locked label May 3, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. locked
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants