React InstantSearch v6 beta 0 released

As all good things, we are starting to count from 0. This first beta of the next version of React InstantSearch should be stable for use, and has the following goals:

  1. support for future React versions

Previously we were relying both on the now “legacy” context API, as well as deprecated life cycles. We have chosen to migrate away from those life cycles alltogether (and not use their UNSAFE_ form), as well as going all-in on the new Context API. This has touched a lot of core parts of the library, so don’t hesitate to reach out if some behaviour is different now.

  1. SSR

Server Side Rendering has been overhauled in two different ways.

The first way is the API: you no longer have to import createInstantSearch for the root of your application, you can simply use InstantSearch now. In the server you can directly import findResultsState from react-instantsearch-dom/server.

The second way is overhead: we have removed duplication in serialized state and requests. Previously the “resultsState” included the raw response and state twice, this has been fixed now, and there’s no longer duplicate information there. We also have changed the implementation of hydrate, so that it now avoids the initial request which already is done on the server.

  1. Bundle size

This is done in two ways. The most important way is lodash. While it’s a perfectly fine library, for our use case it was taking up a lot of our bundle size, and we wanted to change that. It required changes deep in the library, including in the helper, so some undefined behaviour might now be different. This should largely be hidden for you, except if you are using the createConnector API.

We have also moved the algoliasearch client fully out of the library, meaning that you now import it separately, and can not end up with two clients if you were already using the searchClient prop. You now can use the searchClient prop on InstantSearch alone:

import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'myAppId',
  'myApiKey',
  { _useRequestCache: true }
);

// ...
<InstantSearch searchClient={searchClient} />

If you were relying on duplicate requests not being fired when using appId & apiKey before, you need to enable the _useRequestCache option now.

You can read more in the changelog and migration guide for detailed instructions how to upgrade.

5 Likes

Does the migration for SSR guide also apply to Next.js?

Thanks!

Hi @daniel-lutz, it also applies, except you only have a single file for Next, so both imports are in the same file.

1 Like

Thanks for the quick response, got SSR working for results so far :slight_smile:

Another question:

  • Our custom refinementComponents (connected with HOCS), do only render clientSide, is it also possible to incldue them in SSR?

Thanks alot :slight_smile:

can you show that in a sandbox? https://codesandbox.io/s/github/algolia/react-instantsearch/tree/master/examples/server-side-rendering

Difficult, will talk to PM about this and get back to you :slight_smile: