algolia / algolia/instantsearch
Algolia useCurrentRefinement hook seems not to be SSR ready
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 554
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
### 🐛 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:

### 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
Contributor guide
Research direction
Start with the /pages/index.tsx reproduction in the linked CodeSandbox and inspect how InstantSearchSSRProvider, useCurrentRefinement, useHits, and the brand widget consume serverState. Compare the server-generated markup when the hooks precede the widgets; done means useCurrentRefinements and results remain consistent with serverState regardless of markup position.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100