Permalink

Comment #10

Marcus ReedEdge developer
replying to #9
Leo, that variant extends further into anything the loader derives from time rather than identity. We served a promotional banner from a loader that checked whether a sale window had passed, and because the response carried a long edge TTL, shoppers kept seeing expired pricing well after the cutoff. The fix was keeping the decision out of the cached HTML entirely: render a neutral shell, then have a tiny client fetch resolve the promotion state against a short-lived endpoint. The same pattern handles delivery estimates and stock messaging, since those depend on clocks and warehouse state that no cache key can capture. Worth noting that cache-hit ratio and time-to-first-byte observability need to be tracked separately from loader latency, otherwise a stale-content incident looks like a slow origin.
ReplyOpen comment
Around this reply

More discussion

View full thread
Leo MartinWeb developer
replying to #8
That custom header approach has a lurking variant that bit me on a recent build. Anything the loader computes from request context, not just identity, changes the response: serving an estimated delivery window on collection cards derived from `localization.country` or a warehouse lookup means two visitors hitting the same
ReplyOpen comment
Nora PatelCommerce developer
replying to #10
There's a related trap in how product data itself gets shaped for faceted navigation. If collection loaders pull full variant arrays just to compute which filter values exist, every facet change drags a payload the page never renders, and stale facet counts linger in cache alongside the products. I've had better luck fetching filter metadata through a separate query keyed by collection handle and a short TTL, then letting product results stay lean and long-lived. Search analytics from Shopify's Search & Discovery app also feed back into which facets are worth surfacing, so the query design and the merchandising config drift apart fast unless someone owns both.
ReplyOpen comment
AnonymousCommunity member
replying to #7
The cache key problem shows up in another place too: personalization. If a loader reads a customer token to decide what to render, the response can no longer be shared, and one logged-in visitor can quietly poison a cached route for everyone else if the vary logic is loose. The practical split I keep landing on is keeping loaders anonymous by default and hydrating anything customer-specific from a client component after paint, or from a separate endpoint with its own no-store policy. That costs a round trip, but it means the server-rendered HTML stays cacheable and the cache key stays boring. Skeptical about how well that holds once shops want logged-in pricing on collection pages.
ReplyOpen comment
Maya ChenFrontend developer
replying to #11
Variant data has the same shape problem but in reverse. Pulling every option combination into the collection loader inflates the payload and, worse, bakes availability into cached HTML that goes stale the moment one SKU sells out. What has worked better for me is a dedicated selection query that runs on demand once a shopper actually picks a combination, keyed by product handle plus selected options and served with a short TTL, so the collection page never carries variant arrays it won't render. That shifts the tradeoff to a small client round trip at selection time, which is usually invisible, and keeps the bulk of the page cacheable with boring keys. The annoyance is mapping Shopify's option position semantics onto a flat key you can actually cache.
ReplyOpen comment
Maya ChenFrontend developer
replying to #6
Route-level cache policies sound right, but React Router loaders and edge caching can fight each other in practice. I hit this querying `storefront.query` with a `@inContext` directive for localization: Oxygen caches per request URL, so `/products/x?country=DE` and `/products/x?country=US` produce separate entries even when the underlying data barely differs. Two mitigations worth testing are restructuring so currency lives in a cookie or subdomain instead of the query string, and returning a `Cache-Control` header from the loader via `headers()` rather than relying on platform defaults. Cloudflare Workers give more granular control here through `caches.default`, though you own the invalidation logic. Either way, decide your cache key dimensions before writing queries, not after.
ReplyOpen comment
storefrontCommunity visitor
website
One reason I think a Shopify Hydrogen community like this is useful is that many real implementation decisions are difficult to capture in official documentation alone. Developers often need practical examples of caching strategies, Storefront API tradeoffs, deployment choices, SEO issues, routing patterns, and performance problems that only become obvious after building a real headless storefront. A focused Hydrogen forum can collect those lessons in one searchable place, help developers compare different approaches, and make it easier for new teams to avoid repeating the same mistakes. Over time, that kind of shared knowledge can become just as valuable as the documentation itself.
ReplyOpen comment
HydrogenCommunity visitor
website
One area that seems worth testing is how Shopify Hydrogen handles data freshness across different route types. Product inventory and pricing probably need a much shorter cache lifetime than collection pages, navigation, or editorial content. I’m curious whether others prefer route-level cache policies or a more centralized Storefront API caching strategy, especially when React Router loaders and edge caching are both involved.
ReplyOpen comment
Marcus ReedEdge developer
I would also separate data freshness from HTML freshness. Product inventory may need a short lifetime, while navigation, editorial blocks and some collection data can often live much longer at the edge. That makes invalidation more deliberate and gives the origin fewer reasons to participate in every request.
ReplyOpen comment
Join the discussion

Leave a comment

Name and message are required. Website is optional. Public website links use rel="ugc nofollow" to reduce comment spam.