Vue SPA briefly shows the default before the variant appears
My app is a client-rendered Vue SPA built with Vite. When a page loads, users see the default hero for a moment and then the personalized variant swaps in on top of it. It is a short flash but it is noticeable, especially on slower connections.
I do not have a server render in this setup, everything happens in the browser. Is this flash even avoidable given that constraint, or is it just the price of a pure SPA
2 answers
What you are seeing is inherent to the pure client-rendered case. The browser paints the default first because that is all it has, then the personalization fetch resolves and the content swaps in. Nothing is broken, that sequence is just what a SPA does.
The real fix is to resolve the content on the server so the right variant is already in the first paint. In a server-rendered setup the HTML that arrives is the correct variant, so there is nothing to swap and the flash disappears entirely. That is exactly why the SSR path has no flicker. If moving that part of the app to Nuxt is on the table, it is the clean answer here.
That matches what I suspected. We already have a small Nuxt migration planned for the marketing routes, so I will fold the hero into that. Thanks for confirming it is the render model and not something I misconfigured.
If you have to stay client-side for now, the trick is to not render the default at all for that slot. Render nothing (or a neutral placeholder that matches the layout height) until the fetch resolves, then show whatever comes back. You trade a flash for a brief empty state, which usually reads far less jarring than content visibly changing.
Keep the fallback in place either way:
const {content} = await croct .fetch('home-hero@2') .catch(() => ({content: {/* defaults */}}));So a failed call still lands on something sensible instead of hanging.