React-instantsearch along with nextjs

Hello There,

I know that react-instantsearch doesnt support server side render and work is going on, however I was intrigued in knowing if it works with Next.js or not.

I still have to start working on the complete refactor of my Main website in React JS and really want server side rendering. Seems Like Next.js will satisfy my needs.

Can someone check if react-instantsearch works properly with Next?

Thanks!

Hello @harshmaur,

You can already use React InstantSearch with Next.js. The limitation right now is that at the first rendering (on the server) no search will be performed, therefore the first payload will not contain any hits or refinements.

I’m currently working on developing a new API to support this. You can find more information about it here: https://github.com/algolia/react-instantsearch/issues/17#issuecomment-303384385

1 Like

Nice, Such a coincidence. Ill follow the thread.

I just wanted to know the timelines on when this can come into the library.
I needed to take a decision on whether to create my main website on react or not and I rely heavily on algolia.

If it is going to come within a month or so, I can start building up the application and by the time its in the library I can just hook it up.

@harshmaur, I can’t give you any deadline about the shipment of this feature. I’m working on it, and you can follow the github thread to have more information.

However like I said, you can already use next.js with React InstantSearch or any other server side rendering technique (by not rendering on the server). You’ll get everything of it except having results at the first render.

Hi, So I was integrating the plugin into Next.js.

I am getting this error when the page renders.

Warning: setState(…): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op. Please check the code for the AlgoliaConfigure(UnknownComponent) component.

and

Warning: setState(…): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op. Please check the code for the AlgoliaHits(UnknownComponent) component.

<InstantSearch appId={ALGOLIA_APPID} apiKey={ALGOLIA_APIKEY} indexName="deals">
          <Configure hitsPerPage={10} />
          <Hits />
</InstantSearch>

@marielaure.thuret

Yep that’s normal, <InstantSearch /> is not compatible yet with SSR. Some people are using https://github.com/kadirahq/react-no-ssr to remove those warnings.

Thanks! Still new with Next.js.