Multiple indexes on Nuxt SSR fails to hydrate fully

[Gef]

Bug 🐞

What is the current behavior?

On first load the server results come through fine, but when adding refinements from a shared refinement input, the results fail to update. You can see the requests going off to Algolia API, but only the initial 'parent' index receives the refinement input.

Make a sandbox with the current behavior

https://codesandbox.io/s/vue-instantsearch-nuxt-multi-index-8qdvky?file=/pages/search.vue

This sandbox has been created using the multi-index documentation from Algolia as closely as possible, just using the SSR component rather than the ais-instant-search component.
https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/vue/

What is the expected behavior?

The results should update as you refine

Does this happen only in specific situations?

Just on first load, changing routes fixes the issue clientside

What is the proposed solution?

I can't figure this one out

What is the version you are using?

4.6.0

[sarahdayan]

Hi @Gef, I do reproduce the issue. Whenever an app uses <ais-index> and is rendered on the server, the server render is fine but then on the client side, widgets nested under <ais-index> don't inherit updates from the parent index.

For example, if you move <ais-search-box /> in your first <ais-index> and type a query after the page has rendered, it will work. As soon as you move it at the root, it will work during the serer-side render, but not on the client.

I'm currently investigating what's going on. I or someone else from the team will update you as we make progress.

Thanks for your patience.

[dhayab]

Hi @Gef, thanks again for reporting this issue!

You can now update to vue-instantsearch@4.7.1, which includes a fix for it.