Nuxt 3 + Vue-InstantSearch SSR – global <AisInstantSearchSsr> wrapper with dynamic slot children fails to hydrate

[mustafadalga]

Goal

Have one global, SSR-enabled <AisInstantSearchSsr> at the root of my Nuxt 3 app while each route brings its own set of InstantSearch widgets via slots.

Minimal repo

Repo: https://stackblitz.com/edit/nuxt-starter-v7akze42 (fresh Nuxt 3, Vue-InstantSearch latest).

app.vue

<script setup>
import InstantSearchProvider from '~/components/InstantSearchProvider.vue'
</script>

<template>
  <InstantSearchProvider>
    <NuxtPage />
  </InstantSearchProvider>
</template>

components/InstantSearchProvider.vue

<template>
<div>
  <AisInstantSearchSsr>
    <slot/>
  </AisInstantSearchSsr>
</div>
</template>
<script>
import { renderToString } from "vue/server-renderer";
import {
AisInstantSearchSsr,
AisInfiniteHits,
} from "vue-instantsearch/vue3/es/index.js";

export default defineNuxtComponent({
components: {
  AisInstantSearchSsr,
  AisInfiniteHits,
},
inject: [ "$_ais_ssrInstantSearchInstance" ],
async serverPrefetch () {
  const s = await this["$_ais_ssrInstantSearchInstance"].findResultsState({
    component: this,
    renderToString,
  });
  this.$nuxt.ssrContext.payload.data.algoliaState = s;
},
async beforeMount () {
  if (this.$nuxt.payload.data.algoliaState) {
    this.$_ais_ssrInstantSearchInstance.hydrate(
        this.$nuxt.payload.data.algoliaState,
    );
  }
  // avoid double hydration
  delete this.$nuxt.payload.data.algoliaState;
},
});
</script>

pages/index.vue

<script setup lang="ts">
import Hits from '~/components/Hits.vue';
</script>

<template>
  <article>
    <h1>Hits</h1>
    <Hits />
  </article>
</template>

components/Hits.vue

<template>
  <AisHits v-slot="{ item }">
    <p>{{ item.title }}</p>
  </AisHits>
</template>

Expected

On first load view-source should contain rendered hits (proving SSR) whichever route is visited.

Actual

• When the widgets are direct children of (no slot) SSR works.
• When widgets arrive through a (using the global wrapper pattern above), the page never finishes loading—it just keeps spinning indefinitely.

Tried

• https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/vue/
• https://algolia.nuxtjs.org/advanced/vue-instantsearch/#using-vue-instantsearch-with-ssr
• https://github.com/Rigo-m/nuxt-ssr-algolia-example

All rely on widgets being rendered inside the provider component itself, not via slot.

Question

Is there an official pattern (or internal limitation) that prevents SSR when widgets are supplied through a slot?
If not, what’s the recommended way to keep one global, SSR-capable InstantSearch root while letting each page dynamically inject its own widgets ?

[Haroenv]

Have you dug inside the internals of InstantSearch to find at which level the widgets aren't available? Normally there's code to propagate and evaluate the slots, but maybe there's a bug with nuxt 3? Happy to accept a PR if you find the cause and solution.

[mustafadalga]

I didn`t explore internal of InstantSearch. I will try to review/debug internal code.