Unable to use SSR with Inertiajs (Vue) #5866
-
|
I've been struggling with getting SSR to work with Inertiajs using Vue for quite some time, I've gone through the docs here https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/vue/?client=Vue+3 and also looked through the Vite codebase in the examples without success. I'm not really sure at this point if it's an issue with Inertia or Algolia but SSR does work when I comment out all the Algolia workings so it seems to point at Algolia when using the async serverPrefetch() {
const state = await this.instantsearch.findResultsState({
component: this,
renderToString,
})
return state
},This yields the error: In the template I have this: <script setup>
import { Head } from '@inertiajs/vue3'
</script>
<template>
<div>
<Head title="Having this in the template causes SSR server to crash" />
<ais-instant-search-ssr>
<ais-search-box />
<ais-stats />
<ais-refinement-list attribute="brand" />
<ais-hits>
<template v-slot:item="{ item }">
<p>
<ais-highlight attribute="name" :hit="item" />
</p>
<p>
<ais-highlight attribute="brand" :hit="item" />
</p>
</template>
</ais-hits>
<ais-pagination />
</ais-instant-search-ssr>
</div>
</template>
If I comment out the I've put together a simple enough repo to (hopefully) demonstrate the issue. https://github.com/alecritson/algolia-inertia From what I've searched online, using Algolia and Inertia feels pretty niche so there isn't too many resources but if anyone else has accomplished SSR + Algolia + Inertia then I'm all ears as it's affecting our 2 biggest sites. 🙏 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
cloneComponent is customisable, so anything you need to add to the root component (like .use something) can be copied or added there |
Beta Was this translation helpful? Give feedback.
-
|
Interesting, do you have a quick example of the best way to do that or are there docs for it? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
this is the default clone component: https://github.com/algolia/instantsearch/blob/master/packages/vue-instantsearch/src/util/createServerRootMixin.js#L10-L60 which you pass as |
Beta Was this translation helpful? Give feedback.
-
|
Yup that's done it! Thank you much. |
Beta Was this translation helpful? Give feedback.
this is the default clone component: https://github.com/algolia/instantsearch/blob/master/packages/vue-instantsearch/src/util/createServerRootMixin.js#L10-L60 which you pass as
createServerRootMixin({ $cloneComponent: defaultCloneComponent })and in which you can add all global options you need :)