Is SSR support for Nuxt 3 planned ?

[Robin Simonklein]

SSR for Nuxt 3 ⚡️

What is your use case for such a feature?

As Nuxt 3 is currently in Release Candidate version and its stable version is planned for "midsummer 2022" (see here), is the support of SSR with <AisInstantSearchSsr> planned ?

From what I have been able to test so far, using <AisInstantSearch> for client-side rendering seems to work well with Nuxt 3. However, when implementing SSR as shown in the Algolia documentation, using <AisInstantSearchSsr> does not work. I guess that createRootMixin and/or some other parts will have to be adapted to the new Nuxt 3 prerequisites.

What is your proposal

I'm not so familiar with InstantSearch or Nuxt low-level concepts but if there is any way I can help, I would :)

What is the version you are using?

v4.3.3

[Haroen Viaene]

Thanks for opening this issue, I wasn't aware Nuxt 3 was this close to ready. Server-side rendering works in Vue 3, so should also work in theory in Nuxt 3. The relevant code is here: https://github.com/algolia/vue-instantsearch/blob/master/src/util/createServerRootMixin.js and https://github.com/algolia/vue-instantsearch/blob/master/src/components/InstantSearchSsr.js#L15 (although not much in that second file).

If you already have a test setup with nuxt 3 + Vue InstantSearch that isn't working, it would save time implementing support if you could share that!

[Robin Simonklein]

Hi @Haroenv , thanks for the quick answer.

As I was working on a private project that I couldn't share, I took a moment to reproduce a project that is close to reality on CodeSandbox. You can find it here : https://codesandbox.io/s/nuxt-3-instantsearch-test-9c7oj5?file=/app.vue.

So here is the current state:

• Following the Algolia documentation, when I use createServerRootMixin in app.vue to get InstantSearch working in the whole app, layouts included, the server starts and logs the following error:

[Vue warn]: Failed to resolve component: NuxtPage
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Unhandled error during execution of setup function
  at <Anonymous>
[nitro] [dev] [unhandledRejection] TypeError: Cannot read property '_route' of undefined
    at Module.useRoute (file:///sandbox/.nuxt/dist/server/server.mjs:1314:44)
    at setup (file:///sandbox/.nuxt/dist/server/server.mjs:17668:41)
    at callWithErrorHandling (/sandbox/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
    at setupStatefulComponent (/sandbox/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7084:29)
    at setupComponent (/sandbox/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7039:11)
    at renderComponentVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)
    at renderVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:295:22)
    at renderVNodeChildren (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:9)
    at renderElementVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:361:17)
    at renderVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:292:17)

• I also tried to set up the SSR only on the index.vue page, removing the layouts and app.vue. With this setup, the server does not start but does not display any error, neither in the terminal nor in the frontend console

Hope this can help you!

[Haroen Viaene]

I tried as well to get it working without the layout and got closer by marking the CJS packages for vite in nuxt config:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    build: {
        transpile: ['vue-instantsearch', 'instantsearch.js/es'],
    },
    vite: {
        optimizeDeps: {
            exclude: ['algoliasearch-helper', 'hogan.js']
        }
    }
})

[Anders Bootsmann Larsen]

@Haroenv Is there any live example on Nuxt 3 with ais-instant-search-ssr ?

[Haroen Viaene]

No, I haven't yet made an example. If you do, please share in this thread :)