API Reference / React InstantSearch Hooks / <InstantSearchSSRProvider>

<InstantSearchSSRProvider>

Signature 
<InstantSearchSSRProvider initialResults={object}>
  {children}
</InstantSearchSSRProvider>
Import
Copy 
1

import { InstantSearchSSRProvider } from 'react-instantsearch-hooks-web';
See code examples

About this component

<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

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('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 <InstantSearch>.

You should spread the whole server state object returned by getServerState(), which contains initialResults.
Copy 
1
2
3
4
5

<InstantSearchSSRProvider {...serverState}>
  <InstantSearch indexName="indexName" searchClient={searchClient}>
    {/* Widgets */}
  </InstantSearch>
</InstantSearchSSRProvider>
children
type: React.ReactNode

The part of the app that renders <InstantSearch>.
Did you find this page helpful?
React InstantSearch Hooks v6