<InstantSearchSSRProvider>
This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.
If you were using React InstantSearch v6, you can upgrade to v7.
If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.
If you want to keep using React InstantSearch v6, you can find the archived documentation.
<InstantSearchSSRProvider initialResults={object}> {children} </InstantSearchSSRProvider>
1
import { InstantSearchSSRProvider } from 'react-instantsearch';
About this component
If you’re looking for Next.js App Router support, a dedicated react-instantsearch-nextjs
experimental package is available. Check the documentation for its usage.
<InstantSearchSSRProvider>
is the provider component that forwards the server state to <InstantSearch>
. It’s designed to support server-side rendering (SSR) in your InstantSearch application.
To retrieve the server state and pass it down to the component, you need to use getServerState()
.
Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import {
InstantSearch,
InstantSearchSSRProvider,
} from 'react-instantsearch';
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
function App({ serverState }) {
return (
<InstantSearchSSRProvider {...serverState}>
<InstantSearch indexName="indexName" searchClient={searchClient}>
{/* Widgets */}
</InstantSearch>
</InstantSearchSSRProvider>
);
}
Check the SSR example for full markup.
Props
initialResults
|
type: InitialResults
The initial results to forward to You should spread the whole server state object returned by |
||
Copy
|
|||
children
|
type: React.ReactNode
The part of the app that renders |