Wiring Storyblok to Nuxt with the new SDK so blocks render server-side
Our site is Storyblok on Nuxt, using the storyblok-nuxt module for rendering. I kept putting off personalization because last attempt with another tool flickered on hydration, default block painted and then variant jumped in, which looked broken.
Now the Nuxt SDK is out I want to do this properly. How do I fetch the mapped block content on server so there is no flash? Looking for the right layer to resolve slot content, not client swap.
2 answers
The Nuxt SDK supports server-side rendering, so this is the case it is built for. Map your Storyblok blocks to Croct slots, then resolve the slot content during SSR with the Storyblok block content as the fallback. The personalized content is part of the server-rendered response, so it arrives already correct instead of swapping in after load.
One thing I would carry over from your other pain: pin versioned slot IDs so code and content stay in sync as the block schema changes. There is a Storyblok-specific walkthrough in Storyblok Nuxt SSR personalization.
The flicker you hit before is exactly what resolving server-side avoids. With a client plugin the page hydrates with the default and then the variant is fetched and swapped, which is the jump you saw. Doing it during SSR means there is no wrong-content frame to begin with. The general shape of that, not Storyblok-specific, is in Nuxt SSR personalization without flicker.
Clear, thanks. Moving the resolution into the server render now. Good to know the flicker was the client-plugin pattern and not inherent.