Personalizing a Sanity-sourced hero inside a Hydrogen storefront without the swap
Let me describe the data flow first. Product data comes from Shopify through the Storefront API. Editorial content, including the home hero, comes from Sanity. The storefront is Hydrogen on React Router.
In my first attempt, the loader renders the default Sanity hero, then a client component fetches the personalized variant from Croct after hydration and swaps it in. The result is that visitors see the Sanity default for a moment, et voila, it flips to the personalized one. Not acceptable for the brand team.
What is the right pattern here so the personalized hero is there from the first paint?
2 answers
The swap you are seeing is exactly what client-side fetching after hydration produces: the server sends the default, the client fetches, the DOM updates. The fix is to move the Croct fetch into the Hydrogen loader.
The pattern:
- Map your Sanity hero component to a Croct slot. Your Sanity content stays as the default fallback, so nothing about your editorial workflow changes.
- In the route loader, fetch the slot content alongside your Sanity query. Whatever the loader returns is in the server-rendered HTML, so the personalized hero is there on first paint. No flash, nothing to swap.
export async function loader({context}: LoaderFunctionArgs) { const [hero, editorial] = await Promise.all([ context.croct.fetchContent('home-hero', { fallback: defaultHeroContent, }), loadSanityEditorial(), ]);
return {hero: hero.content, editorial};}The fallback keeps the Sanity default rendering if the request ever times out.
Moved the fetch into the loader and the swap is gone. The hero arrives personalized in the HTML now. Thank you.
One thing to add since you are on Hydrogen: keep the Sanity document as the single source for the default variant rather than duplicating copy into Croct. We map the Sanity fields into the fallback object in the loader, so editors keep editing in Sanity and only the personalized variants live in Croct. Less drift between the two systems.