Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task done
lechinoix opened this issue Aug 2, 2023 · 1 comment · Fixed by #6377
Open
1 task done

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

lechinoix opened this issue Aug 2, 2023 · 1 comment · Fixed by #6377
Labels
Library: React InstantSearch ≥ 7 Issues in any of the react-instantsearch@7 packages (formerly named react-instantsearch-hooks) Type: Question

Comments

@lechinoix
Copy link

lechinoix commented Aug 2, 2023

🐛 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
@lechinoix lechinoix added the triage Issues to be categorized by the team label Aug 2, 2023
@Haroenv
Copy link
Contributor

Haroenv commented Aug 3, 2023

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.

@Haroenv Haroenv added Library: React InstantSearch ≥ 7 Issues in any of the react-instantsearch@7 packages (formerly named react-instantsearch-hooks) Type: Question and removed triage Issues to be categorized by the team labels Aug 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Library: React InstantSearch ≥ 7 Issues in any of the react-instantsearch@7 packages (formerly named react-instantsearch-hooks) Type: Question
Projects
None yet
2 participants