instantsearch
instantsearch copied to clipboard
Algolia useCurrentRefinement hook seems not to be SSR ready
🐛 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
- Go to the repo link and select a value in the first facet filter (e.g.
brand: Metra
) - Refresh the page
- Verify that the
getServerSideProps
returns aserverState
that includes"disjunctiveFacetsRefinements":{"brand":["Metra"]
- Inspect the server generated markup
- The printed indexUiState seems correct even if positioned before any widget on the page
-
useCurrentRefinements
should include theMetra
value too but this is not true. At least if it precedes the correspondingbrand
widget (oruseMenu
call). - The
results._state
accessible viauseHits
seems to be empty as well when positioned in the markup before any widget. See the screenshot below:

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
- [X] 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.