Commerce Performance Is More Than A Speed Score
A storefront’s success isn’t captured by Lighthouse scores or Core Web Vitals alone. Those metrics matter, but the real challenge is balancing customer experience, storefront flexibility, and business goals like conversion and retention. Chasing raw performance often leads to statically generated, HTML-first pages. That approach works — until the business needs personalization to move the needle.
That journey typically starts with localization, then escalates to contextual pricing, huge frequently-updated catalogs, live A/B tests, and tailored recommendations. At that point, every page becomes a dynamic grid where each slot is filled based on visitor behavior and evolving business rules. Static generation no longer fits.
Hydrogen: A React Framework Built For Dynamic Commerce
Shopify built Hydrogen to close a gap in the developer tooling landscape. The core requirement for modern commerce is dynamic server-side rendering with fast storefront data access. Caching, prerendering, and edge delivery should be layered on top of that foundation — not replace it.
Hydrogen is a React-based framework designed specifically for commerce, powered by Shopify APIs and infrastructure:
The framework pairs React Server Components with streaming server-side rendering, efficient data-fetching primitives with sensible cache defaults, and flexible page-level caching controls. It also ships with Shopify-optimized commerce components that handle Storefront API communication so developers can focus on presentation.
“The Chrome team at Google is excited to see Shopify continue to improve web performance at scale. Through our collaborations to improve perf out of the box, such as smarter image optimization, we believe that it’s possible to achieve an excellent user experience that benefits Shopify’s merchants and their customers.”
— Addy Osmani, Chrome Engineering Manager
Key Technical Building Blocks
- Streaming server-side rendering via React’s Suspense for a fast first render.
- React Server Components for efficient component-level updates after the initial render.
- Server and client data fetching primitives with smart cache defaults.
- Flexible page and subrequest caching controls for dynamic content and edge delivery.
Hydrogen is supported by a Vite-powered development environment. Shopify worked directly with the React core team on server components, with the Vite ecosystem on server-side streaming, and with Google’s Aurora team on conformance tooling and CLI integration.
The developer preview is live, with docs, a Stackblitz test instance, and a GitHub repository open for feedback:
Oxygen: The Hosted Runtime For Hydrogen
A framework alone doesn’t solve scaling. That’s where Oxygen comes in — a Shopify-hosted V8 Isolate-powered JavaScript worker runtime built on the platform’s decade of experience running millions of storefronts. It handles traffic spikes from flash sales or viral campaigns without requiring infrastructure planning from merchants.
Oxygen runs on geo-distributed clusters with Shopify data colocated milliseconds away. Fast data access is central to dynamic commerce, and colocating data and rendering is what makes low-latency responses possible. Shopify’s CDN sits one network hop up, adding edge delivery plus commerce-specific protection against malicious bots and DDoS-scale attacks.
Oxygen is currently in early access with selected merchants, with broader availability planned for 2022.
Dynamic Does Not Eliminate Static
Real storefronts need both cached, edge-served content and personalized, dynamically rendered sections. Hydrogen and Oxygen aim to make that hybrid approach easy to build and cost-effective. The goal is to eliminate the hard plumbing involved in modern commerce and let developers focus on the differentiated storefront experience.
The public developer preview is available at shopify.dev/custom-storefronts/hydrogen.
