UI libraries / React InstantSearch / Widgets

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

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

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

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

Guide Server-side rendering with React InstantSearch

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';

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

Parameter Description
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 v7