question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unexpected shallow routing when navigating through history.

See original GitHub issue

Bug report

Describe the bug

When going back through history with a dynamic page, NextJS will use newer props to render shallow history entries.

To Reproduce

Say I have a dynamic route that handles /article/{id} and /article/{id}/comments. Given the same id, these URLs use the same data with a tab widget to switch between the two views and URLs. So we can use shallow routing to switch between the tabs without scrolling or refetching data.

The issue manifests with this kind of navigation:

  1. Click a link to /article/hello-world. This calls getInitialProps to fetch article “hello-world”.
  2. Switch to comments tab with a shallow link to /article/hello-world/comments.
  3. Click a link to /article/nextjs-rocks. This calls getInitialProps to fetch article “nextjs-rocks”.
  4. Click browser back button. Url changes to /article/hello-world/comments, but the page shows comments for “nextjs-rocks” article

Try it here. Code

Expected behavior

I expect to see comments for “hello-world” article.

This definitely needs a deeper discussion, but I’d like to group shallow history entries with the history entry that initially called getInitialProps. So when someone navigates back from /article/nextjs-rocks to the shallow /article/hello-world/comments entry, it calls getInitialProps to fetch data. When they go further back to /article/hello-world, that could perhaps be shallow.

System information

  • Version of Next.js: 8.0.4

Context

I encountered this issue with a dynamic page that pulls content from a CMS. It broke when I created a component that cleans up trailing slashes in the url, by calling Router.replace with shallow: true. When it cleaned the url, I could not go back to that route, since it would use props with a different page from the CMS.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:10
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
fabbcommented, Feb 17, 2020

We could save a lot of server load if we could avoid SSRs in this case. Any ideas for workarounds?

0reactions
balazsorban44commented, Jan 29, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next.js - Shallow routing with dynamic routes - Stack Overflow
Shallow Routing gives you the ability to update pathname or query params without losing state i.e., only the state of route is changed.....
Read more >
Why useNavigate hook in react-router v6 triggers waste re ...
While optimizing performance in one of my React.js projects I stumbled upon components re-rendering for no apparent reason whatsoever.
Read more >
How to Change URLs with Shallow Routing in Next.js - Netlify
Shallow routing is when you change your website's URL without re-running data fetching methods again. In the case of Next.js, it means you...
Read more >
Testing Vue Router
We could use a real router, then navigate to the correct route for this ... [Vue Router warn]: Unexpected error when starting the...
Read more >
Navigation Areas and Costs - Unity - Manual
... to deal with a scenario where walking on shallow water is slower. ... across that area is considered to be three times...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found