Introduction to Shopify Oxygen: Headless Commerce Platform

; } Explanation : useShopQuery : Performs GraphQL queries directly at the edge using Hydrogen's data hooks. PRODUCT_QUERY : Fetches product media, such as video URLs or thumbnails. cache.maxAge : Sets the hard caching TTL; swr allows stale data while revalidating for 2 hours. Geographic Routing and Performance Model Oxygen’s traffic director routes requests based on geolocation headers to minimize round-trip latency. Edge nodes synchronize cache invalidation via pub/sub messaging for consistent product data. The runtime prioritizes streaming responses for video content, using ranged fetches to reduce time-to-first-byte. Versioned Edge Deployments with Atomic Rollouts Shopify Oxygen handles storefront updates through immutable, versioned builds that deploy atomically across its global edge network. Each deployment generates a uniquely hashed bundle, enabling controlled rollout and instant rollback capabilities. This setup defines deployment behavior in oxygen.config.js : export default { deploymentStrategy: { rollout: 'gradual', // Options: 'gradual', 'canary', or 'instant' healthChecks: ['/status'], // Endpoint used for pre-rollout validation } }; Explanation : Sets rollout to 'gradual' to enable staged deployment across regions or traffic percentages. Defines a healthChecks array with endpoints like /status used to verify system readiness before rollout proceeds. Context-Aware Edge Caching Rules Oxygen supports programmable caching logic based on request context, enabling granular control over response caching. Caching decisions adapt dynamically based on geography, user authentication, or backend state (like inventory). For example, product pricing can be cached per country, with fast expiration triggered by inventory thresholds: export async function api(request, {env}) { const region = request.cf.country; const key = `product-${request.params.id}-${region}`; const cached = await env.OXYGEN_CACHE.get(key); const inventory = await getInventory(request.params.id); const ttl = inventory < 5 ? 10 : 3600; if (!cached || inventory < 5) { const data = await fetchFreshProductData(); await env.OXYGEN_CACHE.put(key, data, { metadata: { inventory }, ttl, }); return data; } return cached; } Explanation : Defines an edge API route with dynamic product caching per region using Cloudflare's request.cf.country . Constructs a cache key combining product ID and region, then checks for a cached response in OXYGEN_CACHE . Queries current inventory levels; if stock is low ( < 5 ), it sets a short TTL (10 seconds), otherwise defaults to 1 hour. Getting Started with Shopify Oxygen and Hydrogen Shopify Plus supports custom storefronts through Hydrogen (a React-based framework) and Oxygen (Shopify's global hosting platform). This setup delivers edge-rendered storefronts with integrated GraphQL queries, media optimization, and SSR (server-side rendering) capabilities. The following steps outline how to provision, configure, and deploy a high-performance Hydrogen storefront on Oxygen. Install Shopify CLI Install the required CLI tools globally: npm install -g @shopify/cli @shopify/cli-hydrogen Explanation : Installs Shopify's CLI tools globally using npm for system-wide access. @shopify/cli provides commands to scaffold, preview, and deploy Hydrogen storefronts. @shopify/cli-hydrogen adds Hydrogen-specific features to the core CLI. Initialize a Hydrogen Storefront Generate a new project using: npm create @shopify/hydrogen@latest my-hydrogen-storefront Explanation : Initializes a new Hydrogen project using Shopify’s latest project template. The @latest tag ensures the most up-to-date starter version is used. Creates a new directory named my-hydrogen-storefront with preconfigured files. Configure Oxygen Deployment Navigate to the project: cd my-hydrogen-storefront Link it to your Shopify store: shopify hydrogen link Deploy to Oxygen's edge network: shopify hydrogen deploy This builds the app, provisions edge infrastructure, and pushes assets globally with automatic CDN integration. Define Edge-Side Caching Behavior Configure edge cache headers via hydrogen.config.js : export default { routes: './src/routes', edgeCache: { maxAge: 3600, swr: 7200, }, }; Explanation : routes points to the custom route handlers directory. edgeCache.maxAge sets how long responses stay fresh in edge caches (in seconds). swr (stale-while-revalidate) defines how long stale content is served while background updates happen. Integrate Edge-Cached Video Components Install Shopify’s video player utility: npm install @shopify/hydrogen-video Create a dynamic component with edge-cached GraphQL queries: import {Video} from '@shopify/hydrogen-video'; export default function ProductVideo({id}) { const {data} = useShopQuery({ query: VIDEO_QUERY, variables: {id}, cache: {maxAge: 86400}, }); return

Boost Campaign Performance Through Video