Bug: Next 13 with App Router and Streaming Enabled causes issues with Browser Navigation & RefinementList Widget

[Yawar]

🐛 Current behavior

When streaming is enabled, routing does not work as expected and it also throws an error related to refinement.

🔍 Steps to reproduce

1. Add streaming by adding loading.jsx file
2. select any of the refinement from the sidebar and wait for updated data to rendered on the page
3. Refresh the page at this moment and verify the correct data and URL state is also maintained
4. Now click on the browser's Back button. It will update URL correctly and also uncheck the selected refinement but data is not updated although we can see that new data is fetched correctly in the browser's network tab
5. Now clicking on any of the refinement will also throw an error.

Please watch this recording for better understanding
https://www.loom.com/share/5a2b54810cbe415586ba6e66db6e530a?sid=170f8918-dc0e-4865-b69b-71ebe11669c8

Live reproduction

https://codesandbox.io/p/sandbox/dazzling-cdn-c2flwn

💭 Expected behavior

Ensure Browser Navigation Functions Accurately with Streaming Enabled on Next 13/14 and App Router and render the correct data

Package version

react-instantsearch-nextjs 0.1.7

Operating system

all

Browser

all

Code of Conduct

• I agree to follow this project's Code of Conduct

[Yawar]

Hey @Haroenv - I also noticed that when we click any widget action (like refinement or pagination etc), it triggers a repeated call to the same route via fetchServerResponse.js as fetch. This causes server components in that route to re-evaluate, showing updated text/data. I found that using this: useRouter().push(url) to update the URL causes this route to be recalled, leading to unintended re-evaluations for everything else.

Here's the short video:
https://www.loom.com/share/2554588b2c61407f9625df8748adf1fc?sid=eace60b5-ee87-453b-a4a8-80c3fc754eee

So Next said that using useRouter.push(url) will call that route dynamically but I believe to make our widgets interactive we donot need to use this and instead we can use native JS:
typeof window !== 'undefined' ? history.pushState({}, "", url): router.push(url, { scroll: false });.
I've tested this and worked as I expected.

[Aymeric Giraudet]

Hi @syed-yawar, thanks a lot for the reproduction and videos !

I'll add this to our backlog.

About the use of useRouter.push, we did that while thinking perhaps they would bring the shallow option that the pages router has, but since it does not longer rely on having a Next.js key in state to rerender upon clicking on the back button, I guess we could just use history.pushState in the stable version.

There might be valid reason to use push though, like if users do want to trigger a rerender of server components that would read from the new URL, in which case we could maybe provide an option.

Thanks again !

[Aymeric Giraudet]

Hi @syed-yawar

I've had a look into it and it's because when pressing the back button, the loader from loading.tsx would show up again, resulting in the widgets running useEffect cleanups even though they didn't seem to actually unmount, as they wouldn't get added back because of existing refs.

This seems more like an issue on Next's side (or the canary version of React they use) as it seems to have been fixed as of 14.1.0 which released 3 days ago in which I can't reproduce the bug. I think it's due to this fix : vercel/next.js#60578

Can you please try and let me know if it works ?

[Yawar]

Hello @aymeric-giraudet ,

I've conducted tests on the latest version of Next, which is 14.1.0. As you indicated earlier, I couldn't replicate the issue. Appreciate your attention to this. 👍