Static rendering search results w/ Gatsbyjs

I’m using Algolia in a GatsbyJS static site builder project, and the Google Bot is ignoring my search results.

I cribbed extensively from the NextJS / Algolia example repo, but while Next is hydrating resultsState with every page request, Gatsby needs to hydrate all the results at build-time. So, I fetched the resultsState to a json during the build process, then load it into <InstantSearch/> from the disk.

I was able to get an initial resultsState hydrated for page=1 of my results, which accounts for 20/650 total results.

However, when I try to load subsequent pages (page=2, etc), InstantSearch just loads the initial 20 results while it fetches the correct results.

I tried running findResultsState w/ a <Configure hitsPerPage={700} /> in the InstantSearch, but this resulted in a crazy 11 MB file (with 3 facets), so I don’t think that’s an option.

I guess my next option is to try & build every pagination page as a separate path (ie /list/3/ instead of /list/?page=3). Am I correct in assuming I could then run findResultsState once for each page? If so, how could I pass-in the pagination parameter to make sure the correct results are fetched?

Also amenable to other suggestions–quick-fixes and easy good-enough-hacks being especially welcome

1 Like

Hi @brandon1,

If you want to retrieve the results of a particular page you can pass a searchState to findResultsState.

The searchState would have the following format: {page: 2}.

findResultsState is just a function that retrieve results based on a specific search state. If you don’t provide any it will use the default value of your app. It runs only once, except if you have a mechanism to do it several time.

Does this help?