# Personalizing a Sanity-sourced hero inside a Hydrogen storefront without the swap

Asked by Nadia Rousseau on 2026-07-12. Tags: shopify, hydrogen, sanity, flicker.

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

### Accepted answer from Casper van Dijk (2026-07-12)

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:

1. Map your Sanity hero component to a Croct slot. Your Sanity content stays
   as the default fallback, so nothing about your editorial workflow changes.
2. 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.

```ts
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.

#### Reply from Nadia Rousseau (2026-07-13)

Moved the fetch into the loader and the swap is gone. The hero arrives
personalized in the HTML now. Thank you.

### Answer from Ingrid Solberg (2026-07-13)

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.