Configure Hydrogen route-level caching with CacheLong and CacheShort and understand Oxygen cache invalidation

In-depth guide

Steps

1. Import CacheLong, CacheShort, CacheNone, and CacheCustom from @shopify/hydrogen; pass the desired strategy as the cache option on storefront.query calls inside Remix loaders
2. Use CacheLong() for static or rarely-changing data like product descriptions, CacheShort() for prices or inventory that change more frequently, and CacheNone() for personalized or cart-related data
3. CacheCustom({ maxAge, staleWhileRevalidate }) gives fine-grained control; set maxAge for the TTL and staleWhileRevalidate to allow Oxygen to serve stale content while fetching fresh data in the background
4. For content that changes on demand (e.g., a product just updated via Admin), use Oxygen's cache purge API or a Shopify webhook → purge integration rather than relying solely on TTL expiry
5. In the loader add the Cache-Control header to the response using CacheLong() with the built-in headers helper if you also want the browser or CDN to cache the rendered page, not just the API response
6. Test caching behavior by adding a Cache-Status header inspection in the Oxygen dashboard's request logs; look for HIT vs MISS vs EXPIRED statuses