API Reference / React InstantSearch Hooks / <InstantSearchSSRProvider>

<InstantSearchSSRProvider>

A
Signature 
<InstantSearchSSRProvider
  initialResults={InstantSearchSSRProviderProps['initialResults']}
/>
See code examples

About this component # A

<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().

Guide Server-Side Rendering with React InstantSearch Hooks

Examples # A

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
  InstantSearch,
  InstantSearchSSRProvider,
} from 'react-instantsearch-hooks-web';

const searchClient = algoliasearch('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');

function App({ serverState }) {
  return (
    <InstantSearchSSRProvider {...serverState}>
      <InstantSearch indexName="indexName" searchClient={searchClient}>
        {/* Widgets */}
      </InstantSearch>
    </InstantSearchSSRProvider>
  );
}

Check the SSR example for full markup.

Props # A

initialResults #
type: InstantSearchSSRProviderProps['initialResults']

The initial results to forward to <InstantSearch>.

You should spread the whole server state object returned by getServerState(), which contains initialResults.

Copy 
1
2
3
4
5
6

type InitialResult = {
  state: SearchParameters;
  results: SearchResults;
};

type InitialResults = Record<string, InitialResult>;
Copy 
1
2
3
4
5

<InstantSearchSSRProvider {...serverState}>
  <InstantSearch indexName="indexName" searchClient={searchClient}>
    {/* Widgets */}
  </InstantSearch>
</InstantSearchSSRProvider>
Did you find this page helpful?
React InstantSearch Hooks v6