algolia / instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/
MIT License
3.73k stars 525 forks source link

fix(routing): manually push changed path #6385

Closed Haroenv closed 1 month ago

Haroenv commented 1 month ago

Summary

Instead of using next's router.push function, we're transitioning back to history.pushState. This works better in many edge cases as it prevents a whole page refresh and rerender.

Result

No unexpected rerenders when changing state.

Possible intended side effect of this fix is of course that any global change handlers or code running in render won't run anymore when changing instantsearch state. This can be worked around by using the onStateChange function or a middleware.

Back navigation still works as expected.

codesandbox-ci[bot] commented 1 month ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fdd966b252f1e7d9a0eec0dc4ef4d296e5b02b03:

Sandbox Source
example-instantsearch-getting-started Configuration
example-react-instantsearch-getting-started Configuration
example-react-instantsearch-next-app-dir-example Configuration
example-react-instantsearch-next-routing-example Configuration
example-vue-instantsearch-getting-started Configuration