Next.js: Shallow routing with custom server and dynamic routes causes re-render

[Tailzip]

Bug report

Describe the bug

When pushing a shallow route on a dynamic page (by dynamic I mean dynamic route: e.g /posts/:id), it re-renders the page.

To Reproduce

1. Go to https://custom-server-express-sgjxibujau.now.sh/posts/1
2. Open up the browser console, and check "Preserve log" (to be able to see that we're navigating to a new page)
3. Click on 'Trigger Shallow Routing' button
4. See Navigated to https://custom-server-express-sgjxibujau.now.sh/posts/1?shallow=true in the console log

Expected behavior

It should update the URL search params and not re-render.

System information

• OS: macOS
• Browser: chrome
• Version of Next.js: 6.0.3 (also 5.0.1)

Thanks!

[cherniavskii]

@Tailzip

Shallow routing allows you to change the URL without running getInitialProps.

Shallow routing doesn't block React component render. And it shouldn't.

[ijjk]

The expected behavior for shallow routing appears to be working in the latest version of Next.js (v8.0.4-canary.11) so I'm gonna close this issue. If you are still having trouble with this feel free to comment.

[alua1612]

Hi! I am using "next": "^9.0.3", and shallow routing doesn't work as expected with dynamic routes in my project. I have a page '/categories:[catId]' and when I navigate to this page with query parameters, page reloads and triggers getInitialProps. Any thoughts on this? Thank you

[sagar-gavhane]

@alua1612 same thing happening for me. I've defined custom routes using express. Whenever URL params changed then the whole webpage gets reloaded.

Anyone has a solution to this problem.