Server side rendering with Next.js and React InstantSearch
npm install next-instantsearch
Server side rendering with Next.js and React InstantSearch
next-instantsearch is a plugin for Next.js projects that allows you to easily configure your Algolia powered InstantSearch app with SSR and URL sync out of the box.
The current version of this library is only compatible with InstantSearch v6 or greater. See the upgrade guides for more info.
Check out the simple example based on the react-instantsearch next example.
``sh`
npm install next-instantsearchor
yarn add next-instantsearch
Use the withInstantSearch HOC to configure InstantSearch and enable SSR:
`javascript
import algoliasearch from "algoliasearch/lite";
import { withInstantSearch } from "next-instantsearch";
import {
Configure,
Highlight,
Hits,
Pagination,
RefinementList,
SearchBox,
} from "react-instantsearch-dom";
const searchClient = algoliasearch("your_app_id", "your_api_key");
const HitComponent = ({ hit }) =>
const Page = () => (
<>
);
export default withInstantSearch({
indexName: "your_index",
searchClient,
})(Page);
`
You may also configure via getInitialProps:
`javascript
import algoliasearch from "algoliasearch/lite";
import { withInstantSearch } from "next-instantsearch";
import {
Configure,
Highlight,
Hits,
Pagination,
RefinementList,
SearchBox,
} from "react-instantsearch-dom";
const searchClient = algoliasearch("your_app_id", "your_api_key");
const HitComponent = ({ hit }) =>
const Page = () => (
<>
);
Page.getInitialProps = async () => ({
indexName: "your_index",
// You may want to set some default searchState.
// This will be merged on to state from the url.
searchState: {
refinementList: {
categories: ["Appliances"],
},
},
});
export default withInstantSearch({
searchClient,
})(Page);
`
Out of the box next-instantsearch will trigger a shallow route replace when your search state changes.
This may not work for you if you're using a non standard router or maybe you want to prevent this route change with a no-op.
`javascript
import { withInstantSearch, createURL, onSearchStateChange } from "next-instantsearch";
import { Router } from "../i18n";
withInstantSearch({
indexName: "your_index",
searchClient,
onSearchStateChange: (searchState) => onSearchStateChange(searchState, Router),
// or
onSearchStateChange: () => {}, // Prevent route change
// or
onSearchStateChange: (searchState, Router) => {
// ... Some custom implementation ...
},
})(Page);
`
During SSR react-instantsearch will call renderToString on your component, meaning your component is rendered outside of the context of your app. For this reason you may need to wrap your component with some context providers etc. More info on react-instantsearch SSR can be found here.
`javascript``
withInstantSearch({
indexName: "your_index",
searchClient,
decorate: ({ ctx, component }) => (
),
})(Page);