Next.js Server-Side Rendering with getStaticProps - findResultsState is not filtered

I’m writing a Next application that uses Algolia Instant Search; so far the setup has been straightforward and intuitive. Coming on to server-side rendering however, I’m having a couple of issues. The main one seems to be around the findResultsState function.

Using the below code, the page does render results on the server (using Incremental Static Regeneration), however it renders the entire index, rather than just the results filtered on the initial state.

So far as I can see I’ve done everything suggested in the Next example, except that I’m using getStaticProps rather than getInitialProps; given that I’m seeing results rendered on the server, I don’t think this is the issue.

Can anyone point out anything that I’m missing, or doing wrong here?

TLDR: Why is findResultsState returning the a render for the entire search index, rather than just filtered results?

// pages/[category].js

import categoryModel from 'models/categoryModel';
import AlgoliaSearch from 'components/AlgoliaSearch';
import searchClient from 'services/api/algolia';
import { findResultsState } from 'react-instantsearch-dom/server';

export default function Category(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <AlgoliaSearch
        indexName="search_index"
        resultsState={props.resultsState}
        initSearchState={props.searchState}
      />
    </div>
  );
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const props = await categoryModel(params.category);

  const searchState = {
    refinementList: { category: [props.title] },
  };
  const resultsState = await findResultsState(AlgoliaSearch, {
    searchClient,
    indexName: 'search_index',
    searchState,
  });

  return {
    props: {
      ...props,
      resultsState: JSON.parse(JSON.stringify(resultsState)),
      searchState,
    },
    revalidate: 1,
  };
}

// components/AlgoliaSearch.js

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import {
  InstantSearch,
  SearchBox,
  RefinementList,
} from 'react-instantsearch-dom';
import searchClient from 'services/api/algolia';
import * as AlgoliaHelpers from './helpers';
import CustomHits from './CustomHits';

const AlgoliaSearch = (props) => {
  const router = useRouter();
  const [searchState, setSearchState] = useState(props.initSearchState);
  const [debouncedSearchState, setDebouncedSearchState] = useState({});

  const DEBOUNCE_TIME = 500;
  const searchStateChangeHandler = (newState) => {
    clearTimeout(debouncedSearchState);

    setDebouncedSearchState(
      setTimeout(() => {
        router.push(AlgoliaHelpers.createURL(newState), undefined, {
          shallow: true,
        });
      }, DEBOUNCE_TIME)
    );

    setSearchState(newState);
  };

  useEffect(() => {
    setSearchState(AlgoliaHelpers.urlToSearchState(location.search));
  }, []);

  return (
    <InstantSearch
      searchClient={searchClient}
      indexName={props.indexName)}
      onSearchStateChange={searchStateChangeHandler}
      searchState={searchState}
      resultsState={props.resultsState}
      widgetsCollector={props.widgetsCollector}
      onSearchParameters={props.onSearchParameters}
      {...props}
    >
      <SearchBox
        translations={{
          placeholder: props.placeholder || 'Search here...',
        }}
      />
      <RefinementList attribute="category" defaultRefinement={props.title} />
      <CustomHits />
    </InstantSearch>
  );
};

export default AlgoliaSearch;

On this line you set the default search state to only initSearchState, and not to searchState which is passed to props.

Do you have this example in a sandbox or GitHub repo so we can try it out fully?