React Instant Search SSR (Next) is rendering client side

[avremel]

I'm using InstantSearchSSRProvider. Every page has Autocomplete in the header, so I've wrapped the entire app is wrapped in InstantSearchSSRProvider. InstantSearchSSRProvider takes server generated state (getServerState) and uses that the populate the list page with initialResults.

I'm only generating server side state for list pages (powered by Algolia) as the data is not needed for non-list pages. However, this is causing non-list pages to be client side rendered.

To reproduce the issue:

1. Go to this codesandbox
2. Open app in new window, you should see "hello world".
3. Disable JS.
4. "Hello world" won't render.

Is there a way to get SSR on non-list pages which only use Autocomplete?

[dhayab]

Hi @avremel , you need to pass down the data from serverState to <InstantSearchSSRProvider>:

<InstantSearchSSRProvider {...serverState}>
  {/* ... */}
</InstantSearchSSRProvider>

Edit: I missed the part when you specified you didn't want to retrieve initialResults in non-list pages. For the moment this data is required, but you could replace it with an empty object in a similar manner as this:

// Determines whether or not to get the initial results from Algolia
const shouldGetServerState = false;

export const getServerSideProps: GetServerSideProps<HomePageProps> =
  async function getServerSideProps({ req }) {
    const protocol = req.headers.referer?.split('://')[0] || 'https';
    const url = `${protocol}://${req.headers.host}${req.url}`;
    const serverState = shouldGetServerState
      ? await getServerState(<HomePage url={url} />, {
        renderToString,
      })
      : { initialResults: {} }
    ;

    return {
      props: {
        serverState,
        url,
      },
    };
  };

[avremel]

Thank you for the response. I've tried stubbing serverState but the issue persists. See this sandbox.

My understanding is that initialResults isn't needed at all for non-list pages which have no facets/hits.

[Haroenv]

If there are no facets/hits, what of React InstantSearch is still displayed, only the searchbox?

[avremel]

Yes, just the searchbox/Autocomplete. If the user hits enter, they get redirected to a dedicated Algolia page.

[avremel]

Using this stub works in the sandbox:

instantsearch/packages/react-instantsearch-hooks/src/components/__tests__/InstantSearchSSRProvider.test.tsx

Line 325 in f802fd0

const initialResults = {

[avremel]

While this solution works, the reason I had to resort to wrapping Autocomplete in InstantSearch was because my Autocomplete component contained hooks from instant search hooks, like in this example.

The cleaner approach is either remove instant search from autocomplete, or only use them on list pages.