How to prevent caching between multiple <InstantSearch/> components with React/Next.js?

[kirkwat]

Hello, I have a general items page where a user can search for any and all items. Then i have category pages with more information, and within each category page is another search area where users can search for items only within that category using the Configure component.

I have an issue sometimes when I visit the general items page, then view a category items page, sometimes the results from the general items page will show in the category items page and vice versa. I believe that the results from one page or InstantSearch component are being cached and shown in the other. I have double checked that I correctly followed the react-instantsearch-nextjs guides, so I am not sure where I am going wrong. any help is greatly appreciated. (I am using app router)

[Haroenv]

Are the InstantSearch components actually different, or is it the same component mounted in a layout file? if so, you may be interested in adding a key to the InstantSearch component.

[kirkwat]

Yes, they are in different page.js files with client initiated on each page. I have also tried adding a key to each InstantSearch component but it has no effect.

[kirkwat]

Not sure where the issue is regarding the caching, but when I do the same implementation with the InstantSearch component instead of the InstantSearchNext component, I no longer have the caching issue (I meant to say in my original messages that I was using InstantSearchNext). If I get some free time, I can make a simplified reproduction of the problem I am encountering.

Also does there happen to be a TypeScript of example of how to use routing with the InstantSearch component.

[Haroenv]

Are you using the last version? I wonder if it can be related to #6106. If you could make a live reproduction, that would be ideal in finding if there's a bug