Blending server-side search with client-side instantsearch



Hi all,

For SEO purposes, I like to load page content as part of the source HTML. I currently do this by fetching data from Algolia on server-side to generate page content.

I then have Instantsearch.js running on the frontend, which essentially conducts the exact same search as the one done on server-side on load, giving the user all the instantsearch filtering and widget benefits.

The issue is that each page is conducting double the amount of Algolia queries, because it is executed once once on server-side and then again by instantsearch.

As I said, the main reason for doing this is SEO, however, I also find it gives a nicer loading effect to the user, because the page loads with the content, rather than appearing slightly after. Sure, instantsearch replaces the content when it loads, but because it is basically the same content, the user does not notice the replacement.

I know there is evidence to say that Google will index content loaded on the client side upon load, however, it is too big a risk/change to rely on that when my pages have always included this content in original source HTML of the page.

Is there any way I can conduct a search on server side and then plug the results into instantsearch so that the first instantsearch load is based on the data I have already fetched on the server side? Following that, any actions taken by the user to search, filter, refine would be handled on the client-side.

This would at least mean that initial page load would only require one set of queries (server-side) rather than two (server-side + client-side instantsearch).