First-visit story vs returning-shopper hero on the same Hydrogen route
Hi everyone! We are a small jewelry brand on Hydrogen and the idea is simple: first-time visitors should see our brand-story hero (the founder, the atelier, the whole thing) and returning shoppers should see new arrivals instead.
In our previous tool the returning check happened client-side, so returning shoppers saw brand-story hero for a second and then it swapped. Design team was not happy with that, and honestly me neither.
How does the returning check work in Croct? Is it decided on server before the page renders, or do I still need to handle a swap?
1 answer
No swap needed. user is returning and user is anonymous are built-in conditions, so you define two audiences in the dashboard with no custom tracking at all.
The important part for your flicker concern: with the Hydrogen SDK you fetch the slot content inside the route loader, and the audience is evaluated at that moment, server-side. So the decision about which hero to serve is made before any HTML is sent, and the correct hero is already in the server-rendered page. There is nothing for the client to re-check or replace after hydration, which is exactly the difference from the client-side pattern you described.
Audiences also evaluate in real time per interaction, so a visitor who becomes "returning" mid-journey gets the right content on their next request without any cache or sync delay.
Setup-wise: one slot for the hero, two experiences (one per audience), and the brand-story content can double as the default fallback for anyone who matches neither.
Perfect, tested it in the loader and the returning hero comes straight in the first paint. Design team is happy now, thank you!