Implementing algoliasearch.js in Nuxt SSR without using vue-instantsearch UI components


I am currently working on a Nuxt SSR project where the choice has been made to not use the baked in UI widgets from vue-instantsearch but instead query Algolia programatically via the algoliasearch js package.

On the client, no problem, but In the fetch hook that triggers on the server side we do get some errors such as: Cannot stringify a function, Cannot stringify a function addAlgoliaAgent. These, however, do not seem to cause a real functional problem. At least not on our local envs.

This POC works overall well but there are at the moment some outstanding questions around URL rewriting and getting rid of the errors aforementioned.

If we wanted to stick to our guns and keep this pattern, (i.e not use the vue-instantsearch widgets), what would be required to make algoliasearch.js SSR friendly?


  • adding createServerRootMixin to create a reusable search instance

  • adding findResultsState in serverPrefetch to perform a search query in the back end

  • calling hydrate method in beforeMount.

Be sufficient to make this work? (As described here)

Similarly, could we use the routers and stateMappings helpers from instantsearch.js to handle the URL rewriting? (As described here)

Or shall we foresee any further problem with that approach?