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.