Strapi + Nuxt 3, how do I get personalized content server-rendered without a flash?
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:
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
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 is built for; the Vue and Nuxt SDK announcement walks through the zero-flicker setup step by step.
Nothing changes on the 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.