InstantSearchSSRProvider

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

Signature

<InstantSearchSSRProvider initialResults={object}>
  {children}
</InstantSearchSSRProvider>

Import

JavaScript

import { InstantSearchSSRProvider } from "react-instantsearch";

About this component

If you use Next.js’s App Router, a dedicated react-instantsearch-nextjs package is available. To learn more, see App router.

<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. To learn more, see Server-side rendering

Examples

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>
  );
}

import React from "react";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import {
  InstantSearch,
  InstantSearchServerState,
  InstantSearchSSRProvider,
} from "react-instantsearch";

const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");

type AppProps = {
  serverState?: InstantSearchServerState;
};

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

Check the SSR example for full markup.

Props

InitialResults

The initial results to forward to <InstantSearch>.You should spread the whole server state object returned by getServerState, which contains initialResults.

<InstantSearchSSRProvider {...serverState}>
  <InstantSearch indexName="indexName" searchClient={searchClient}>
    {/* Widgets */}
  </InstantSearch>
</InstantSearchSSRProvider>;

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

type InitialResults = Record<string, InitialResult>;

React.ReactNode

The part of the app that renders <InstantSearch>.

​Import

​About this component

​Examples

​Props

Import

About this component

Examples

Props