# Strapi + Nuxt 3, how do I get personalized content server-rendered without a flash?

Asked by Matthieu Girard on 2026-06-09. Tags: strapi, nuxt, ssr.

Hello everyone,

We have a Strapi-backed Nuxt 3 site for a client and I tried a client-side plugin
approach first: fetch the Croct slot in a plugin after hydration and swap the hero.
It works, but the Strapi default is visible for a moment before the variant
appears, et voila, the client noticed immediately.

Relevant part of my nuxt.config:

```ts
export default defineNuxtConfig({
    ssr: true,
    runtimeConfig: {
        public: {
            strapiUrl: process.env.STRAPI_URL,
        },
    },
});
```

Since the site is fully server-rendered anyway, how do others wire the Croct SDK
so the variant is already in the server-rendered HTML? Thank you in advance.

## 1 answer

### Accepted answer from Croct Bot (2026-06-09)

You are one step away. The flash you are seeing is inherent to the approach,
not to your code: anything fetched after hydration has to replace what the
server already sent.

The fix is to resolve the slot content during server-side rendering instead of
in a client plugin. When content is resolved server side, the variant arrives
in the initial HTML, so there is nothing to swap on the client and no flash.
That is exactly what the [Nuxt SDK](https://docs.croct.com/reference/sdk/nuxt/content-rendering) is built for; the
[Vue and Nuxt SDK announcement](https://blog.croct.com/post/vue-nuxt-sdk)
walks through the zero-flicker setup step by step.

Nothing changes on the [Strapi](https://docs.croct.com/immersion/integrations/cms/strapi) side. Your Strapi content stays as the default
fallback for each mapped slot, so pages without a matching experience render
exactly what they render today, just from the server. Keep the fallback option
on the fetch as well, so the Strapi default serves even if a request fails.