Giters

algolia / instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

Home Page:https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Initial client side request being made when using a portal with SSR enabled

lechinoix opened this issue · comments

commented

🐛 Current behavior

When using an instant search hook inside a portal, client side requests are triggered inducing a raise in requests consumption. I do not understand why so the example might be misleading to the actual root cause sorry :/

🔍 Steps to reproduce

  1. Load the page
  2. It will be rendered server side (1 query to Algolia)
  3. It will then be rendered client side with the server state
  4. But a useless client side request to Algolia is also made

Live reproduction

https://codesandbox.io/p/sandbox/loving-danilo-ghkkxl

💭 Expected behavior

No client side request to Algolia on page load

Package version

react-instantsearch-hooks: 6.44.1, algoliasearch: 4.14.3

Operating system

macOS

Browser

Chrome

Code of Conduct

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

This is happening because every widget mount and unmount triggers a new network request. Because a different widget is mounted on the client than on the server, InstantSearch does not know that this request is already "done".

The cache is not shared between the client and the server, the first request on client is simply skipped, but that means if it needs to be done a second time, it won't be skipped.

I think the way to solve this would be to change the NoSSR implementation from NoSSR > Panel > CurrentRefinements to SSR ? CurrentRefinements : Panel > CurrentRefinements or equivalent, which keeps the widgets mounted static.