Storyblok + Nuxt 3, how do I render personalized blocks server-side?
Hello everyone,
We run a Storyblok site on Nuxt 3 (Nuxt 3.16, Node 20.12) at our agency in Lyon. We want to add personalized blocks, but everything must be rendered on the server so nothing swaps after hydration.
I found plenty of Next.js examples in the docs and on the blog, but very little for Nuxt specifically.
Is there a supported path for Nuxt 3, or do people wire the Vue SDK manually? Thank you in advance
1 answer
There is a dedicated Nuxt SDK, so you do not need to wire the Vue SDK manually. It ships alongside the Vue SDK and the release is described as zero-flicker in the Vue and Nuxt SDK announcement.
With the Nuxt SDK, content is resolved server-side, so the personalized variant is part of the initial HTML and experiences load with no flash of default content. Nothing swaps after hydration, which is exactly the behavior you are looking for.
The quick start is the same universal command:
npx croct@latest initThe CLI detects your setup and wires the SDK for you. On the Storyblok side, your existing Storyblok block content stays in place as the default fallback, so pages keep rendering the regular Storyblok content whenever no experience applies.