Serving the right locale content in a multi-market Hydrogen storefront?
Our Hydrogen storefront serves several markets and languages. I already resolve the shopper's locale in the loader from the route, and now I want each Croct slot to return content in that language rather than a single default.
I am not sure which locale I should pass to the content fetch, or how default content works per locale when a translation is missing. What is the right way to wire this up?
1 answer
Pass the shopper's locale to the fetch with the preferredLocale option, and the loader resolves that slot in the right language:
const {content} = await context.croct.fetchContent('home-hero@1', { preferredLocale: locale, fallback: defaultHero,});The preferredLocale option is documented on the Hydrogen fetchContent reference. Multi-language works without extra development on your side, the SDK resolves the locale-appropriate content for each request, so you are not branching in the loader per language.
For the missing-translation case, per-locale default content is available, so each locale can define what to fall back to rather than dropping to one global default. That is part of the localization add-on, and how per-locale defaults behave is covered in the slot default content guide.
As with any content in a Hydrogen loader, this resolves server-side, so the localized content arrives in the HTML with no client-side swap after load.