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

Algolia useCurrentRefinement hook seems not to be SSR ready

federicobadini opened this issue Β· comments

πŸ› Current behavior

Algolia instantsearch hooks should allow SSR via InstantSearchSSRProvider.
However useCurrentRefinement seems to return empty on SSR if positioned before any widget in the markup.
I've attached a repro with minimal changes with respect to your Next.js example.

πŸ” Steps to reproduce

  1. Go to the repo link and select a value in the first facet filter (e.g. brand: Metra)
  2. Refresh the page
  3. Verify that the getServerSideProps returns a serverState that includes "disjunctiveFacetsRefinements":{"brand":["Metra"]
  4. Inspect the server generated markup
  5. The printed indexUiState seems correct even if positioned before any widget on the page
  6. useCurrentRefinements should include the Metra value too but this is not true. At least if it precedes the corresponding brand widget (or useMenu call).
  7. The results._state accessible via useHits seems to be empty as well when positioned in the markup before any widget. See the screenshot below:

Screenshot 2023-03-30 at 15 58 28

Live reproduction

https://codesandbox.io/s/nifty-newton-9997dl?file=/pages/index.tsx

πŸ’­ Expected behavior

I would expect useCurrentRefinements not to be position dependent in SSR.
I would expect it to be consistent with the serverState passed to InstantSearchSSRProvider.

Package version

6.42.0

Operating system

No response

Browser

No response

Code of Conduct

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

This has been driving me nuts. Would love to see a fix for this.

The way to go in the future would be to base the clearRefinements and currentRefinements widgets on the uiState, which is known before the widgets are mounted instead of the search parameters. What would be nice about that is the ui would no longer be hardcoded based on the search parameters, and custom widgets could also participate in current/clearRefinements.

However, I'm not sure how we would put logic like the ones of:

  • numericMenu/range rendering as ≀ and β‰₯
  • query being filtered out
  • page being filtered out

Maybe as a stopgap, that could be in a transformation before transformItems?

For now, we're happy that there's a workaround (mount currentRefinements/clearRefinements later than the refinement widgets) and possibly introducing UiState-based current/clearRefinements as an option.