algolia / algolia/instantsearch

Algolia useCurrentRefinement hook seems not to be SSR ready

Open
#5,571 3 comments 9 reactions 0 assignees View on GitHub
Feature: Facets & filters Scope: Connectors Type: Bug
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:

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

- [X] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.