Pages Router client-side navigation hangs?
Answered
mike.ciesielka posted this in #help-forum
Does anyone have any insight as to why a client-side navigation would seemingly hang during a Pages Router route change?
Debugging this kind of in real-time, but the details are loosely as follows:
- the breakage looks like the navigation is failing:
- we get a routeChangeStart event, but no corresponding routeChangeError or routeChangeComplete event. since we tie a progress indicator to this, the progress never completes
- network requests associated with the new page are sending and receiving as you'd expect so this isn't a server latency problem
- when broken, the existing page remains interactive, albeit in some odd ways:
- using any other links will correctly change the URL and a new route change will start and end (unclear if it's an error or success per the API), but the content on-screen doesn't change
This problem is intermittent but the incidence isn't low. It also only occurs in production and not in development.
Any thoughts about what contributes to behavior like this would help us greatly 🙂
Debugging this kind of in real-time, but the details are loosely as follows:
- the breakage looks like the navigation is failing:
- we get a routeChangeStart event, but no corresponding routeChangeError or routeChangeComplete event. since we tie a progress indicator to this, the progress never completes
- network requests associated with the new page are sending and receiving as you'd expect so this isn't a server latency problem
- when broken, the existing page remains interactive, albeit in some odd ways:
- using any other links will correctly change the URL and a new route change will start and end (unclear if it's an error or success per the API), but the content on-screen doesn't change
This problem is intermittent but the incidence isn't low. It also only occurs in production and not in development.
Any thoughts about what contributes to behavior like this would help us greatly 🙂
Answered by mike.ciesielka
Definitely not a Next.js problem it turns out! Cautionary note to not cause infinite re-renders in React!
3 Replies
While the exact navigational details in this StackOverflow post aren't the same, it appears like they were experiencing similar router behavior https://stackoverflow.com/questions/75677630/next-js-routing-breaks-after-router-push
We made an attempt to just remove our middleware.ts file per one of the answers to the post above, but that didn't work
Definitely not a Next.js problem it turns out! Cautionary note to not cause infinite re-renders in React!
Answer