Nuxt 3 Instantsearch SSR

[kreejzak]

Hello,
I just wanted to ask if it is possible to use this module for Nuxt 3 Instantsearch with SSR?
I tried using <ais-instant-search-ssr> component, but it throws:

[nuxt] [request error] [unhandled] [500] createServerRootMixin is required when using SSR.                                                             

Also the Algolia's official Instantsearch example for Nuxt with SSR is only for Nuxt 2. So not much to learn there.

Is there any way to use Instantsearch with SSR, or should I use useAlgoliaFacetedSearch inside of useAsyncData for obtaining results and handle filtering manually with factes?

Thanks for your time!

[Baroshem]

Hey,

Thanks for rising this question. Vue Instantsearch does not work with SSR by default. In order to make it a mixin (or something similar for Vue 3) would be needed.

The official docs are using Nuxt 2 as the module is maintained by me and help of contributors, not by Algolia itself. Thats is why the examples there are not up to date but I already contacted Algolia team to add my docs there.

For now, I would recommend you to use useFacetedSearch or regular useAsyncAlgoliaSearch to get the data in SSR while we can think about supporting SSR with Vue Instantsearch in future releases :)

[Baroshem]

For that, you can use https://algolia.nuxtjs.org/getting-started/usage#useasyncalgoliasearch and pass as a third property of the param object the requestOptions filters https://www.algolia.com/doc/api-reference/api-methods/search/#method-param-requestoptions

[kreejzak]

Thank you for pointing me in the right direction! 🙏

[Baroshem]

Glad that I could help!

I will reopen the issue so that I could make some research about implementing the mixin to make Vue Instantsearch work with SSR :)

After all, it should work for SSR too so it is a valid feature request.

[Baroshem]

Hey @Haroenv

Long time no see 😃

Have you maybe found a way to implement instantsearch for Vue 3 with SSR? 🙂

[Haroenv]

I tried this recently, but didn't manage to get reference to the component's render as you can do in non-setup style scripts. My attempt is here: algolia/doc-code-samples#430

[Baroshem]

Thanks @Haroenv I will take a look at it in a few days

[Baroshem]

Havent managed to make it work either unfortunately. I think this can be an opportunity for some community contribution to this module as it is not very requested feature for all users but rather a nice to have

[Strift]

Hello there 👋

First, thanks a lot for your module and for sharing code samples. It was useful to look at the code, even though I'm not using Algolia. For the context, I'm using Meilisearch, which is an open source alternative. Meilisearch also uses InstantSearch components to implement the front-end.

I haven't yet come to a solution, but I've got a partially working sample. It might or might not be useful but I figured I would share it as your contributions helped me a lot in my work, so I hope I can return the favor.

Basically, my implementation works for server-side rendering the results, but not the other components that depends on the state (ie. filters, etc.) At least, that's my understanding of the behavior. Feel free to let me know if I'm wrong.

I made a local Nuxt module in one of the projects I'm working on, you can take a look here: https://github.com/meilisearch/ecommerce-demo/blob/main/components/organisms/MeiliSearchProvider.vue

EDIT: The link is now public as intended

Have a good day,