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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
NextJS router.query
is stale after hitting back button
#6002
Comments
Is this the same as #5987? If you patch InstantSearch to use |
@Haroenv I'm using NextJS 12.3.4, which only has a page router. How can I patch it to use |
Ah I misunderstood the problem, that's indeed not related. If you add a button unrelated to InstantSearch that pushes to the router like this (https://codesandbox.io/p/devbox/nextjs-routing-issue-forked-t7w35v?file=%2Fpages%2Findex.tsx%3A60%2C1-64%2C16): <button type="button" onClick={() => {
router.push('?something=true', undefined, {shallow: true})
}}>
add to url
</button> It behaves the exact same. I believe because the push is shallow, next doesn't consider that the router and app component needs to re-render, but only what has listeners to the beforePopState router event. What use case do you have for having the
routeChangeComplete is possible, but I wouldn't bet on it.
I don't believe the router should be "not shallow", as then the backend gets fetched, which is definitely a waste of resources. |
@Haroenv I'll give you an example from our app:
We use What would the alternative be? Should I be checking Would it be possible add an option for |
I'm not convinced |
I will try using |
I guess an issue you may have is if it's inside InstantSearch, there may be a chance of a render where the component doesn't render (although I think that's just a client rendering potential problem, shouldn't happen when you server side render) |
馃悰 Current behavior
If you hit a filter value,
router.query
gets populated correctly with the new URL. If you hit the browser back button, the facet selection gets cleared butrouter.query
still has the old filter selection and the component doesn't even get re-rendered.馃攳 Steps to reproduce
router.query
being logged with the brand filter.router.query
hasn't been updated.Live reproduction
https://codesandbox.io/p/devbox/nextjs-routing-issue-x9p8gy
馃挱 Expected behavior
I expect:
router.query
to have a new valuerouter.query
Package version
algoliasearch 4.14.3, react-instantsearch 7.5.1, NextJS 12.3.4
Operating system
Mac 11.6.5
Browser
Chrome 113.0.5672.126
Code of Conduct
The text was updated successfully, but these errors were encountered: