NextJS `router.query` is stale after hitting back button about instantsearch

[avremel]

I will try using useInstantSearch. If I'm not mistaken, I had issues relying on it early on, which is why I resorted to router.query. I'll give it another try.

[Haroenv]

Is this the same as #5987? If you patch InstantSearch to use history.pushState instead of the next router, does it work?

[avremel]

@Haroenv I'm using NextJS 12.3.4, which only has a page router.

How can I patch it to use history.pushState? The same as the Remix example in the docs?

[Haroenv]

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 router being updated, does it cause downstream issues? I wonder if something can be said to the router in the beforePopState function (

instantsearch/packages/react-instantsearch-router-nextjs/src/index.ts

Line 147 in bbb27fc

return libraryBeforePopState();

) à la "there was an update, please render root again", but not sure if that's possible. Maybe emitting a 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.

[avremel]

@Haroenv I'll give you an example from our app:

1. Navigate to https://www.ajmadison.com/c/dryers/
2. The title is Dyers
3. Click on Fuel Type: Electric
4. The tile Electric Dryers
5. Hit the back button
6. The title is still Electric Dryers

We use router.query to calculate the title, that's why we can't rely on a shallow update.
Same goes for which facets are shown on the page, they are dependent on the current route.

What would the alternative be? Should I be checking useInstantSearch instead?

Would it be possible add an option for shallow: false?

[Haroenv]

I'm not convinced shallow: false would even solve the issue if that's what's going on, however using useInstantSearch definitely will be updated with the ui at all times, so I recommend you use that for your source of truth instead of router. Does that work for you?

[Haroenv]

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)