TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

Hosting for Custom Storefronts (Oxygen)

10 posts · Jul 2020 – Jun 2026

What this trail covers

Shopify has developed and enhanced its hosting solution for Hydrogen custom storefronts, known as Oxygen. This involves leveraging Hydrogen, a React framework for custom storefronts, and integrating it with cutting-edge technologies like React Server Components and component-level data fetching. This post details best practices for using React Server Components (RSC) within Hydrogen applications, emphasizing a default-to-shared component strategy, judicious use of client components for interacti. The MCP UI protocol extends MCP by returning a set of embedded UI resources, supporting inline HTML, remote resources, and Remote DOM for direct client-side rendering. This enables AI agents to augment their conversational flow with visual and interactive components, handling complex commerce UI elements like variant selection, bundle builders, and real-time inventory updates. An intent-based message system preserves agent control while components bubble up intents for the agent to interpret, facilitating rich user experiences. Adaptive styling allows components to match their host environment's brand guidelines.

All Shopify trails
  1. Quick: An internal hosting platform for the AI era (2026) - ShopifyThis post details the architecture and evolution of Quick, an internal hosting platform. It describes the initial architecture using Google Cloud Storage, NGINX, and gcsfuse for serving static assets, with Identity-Aware Proxy (IAP) for authentication. It then details the addition of backend services via APIs, including a CloudSQL database, AI proxy, file uploads, BigQuery integration, WebSockets, and an Identity API. The post also discusses the platform's philosophy of simplicity, its adoption driven by AI-generated websites, and its emergent ecosystem. Maintenance aspects like rate limiting and migration from Node.js to Go are also covered.
  2. MCP UI: Breaking the text wall with interactive components (2025) - ShopifyIntroduced the Model Context Protocol (MCP) UI, an extension to the MCP protocol that allows AI agents to return interactive UI components alongside data. This protocol supports inline HTML, remote resources, and Remote DOM for client-side rendering. Implemented an intent-based message system where UI components bubble up intents (e.g., `view_details`, `checkout`, `notify`) for the agent to interpret, preserving agent control. Enabled adaptive styling for embedded components via CSS to match host environments.
  3. Mixing It Up: Remix Joins Shopify to Push the Web Forward - ShopifyShopify announces the acquisition of the Remix team and framework. Remix will be integrated into Shopify's Hydrogen framework for custom storefronts, replacing React Server Components (RSC) with Remix's data loading patterns for improved performance and developer experience. Remix will also be used across other Shopify projects. The open-source community will benefit from Shopify's sponsorship and support for Remix's roadmap.
  4. How We Built Oxygen: Hydrogen’s Counterpart for Hosting Custom Storefronts - ShopifyThis post details the technical choices and experiences that led to the development of Oxygen, Hydrogen's counterpart for hosting custom storefronts. It highlights the integration of third-party services like GitHub Actions and Cloudflare Workers with Shopify's internal services (CDN, Admin API, Identity). Key technical decisions include leveraging Cloudflare's worker infrastructure for edge distribution and dynamic dispatch, and adopting Grafana, Cortex, Loki, and Tempo for observability. The post also discusses the partnership with Cloudflare and the formation of WinterCG to standardize serverless runtimes.
  5. How We Built Hydrogen: A React Framework for Building Custom Storefronts - ShopifyThis post details the development of Hydrogen, a React framework for building custom storefronts on Shopify. It highlights the adoption of React Server Components (RSC) and streaming server-side rendering (SSR) for improved performance and developer experience. Key technical decisions include component-level data fetching with a preload cache to avoid network waterfalls, and the removal of bloated GraphQL fragments in favor of more explicit developer-defined queries. The post also discusses the benefits of building in public, including external contributions and feedback, and the strategic bet on RSC for its modularity and ability to integrate third-party components.
  7. Best-in-Class Developer Experience with Vite and Hydrogen - ShopifyThis post details the integration of Vite as the bundler for Hydrogen, a framework for custom storefronts. It highlights Vite's advantages over traditional bundlers like Webpack, focusing on its speed, ease of use, plugin system, and support for modern web features like ES Modules and Hot Module Replacement (HMR). The post explains how Hydrogen leverages Vite's capabilities, including its plugin system and SSR support, to enable features like React Server Components and streaming requests, ultimately aiming to provide a best-in-class developer experience.
  8. Hydrogen & Tailwind: The Perfect Match for Building Beautiful Storefronts - ShopifyThis post details the integration of Tailwind CSS with the Hydrogen framework for building custom storefronts. It explains how Tailwind is included by default in the Hydrogen starter template and discusses best practices for using Tailwind classes within React components, emphasizing componentization and the benefits of utility-first CSS for composability and team collaboration. It also touches on the learning curve and the advantages of Tailwind's constraints for design consistency.
  9. React Server Components Best Practices You Can Use with Hydrogen - ShopifyThis post details best practices for using React Server Components (RSC) within Hydrogen applications. It advocates for starting with shared components, pivoting to client components only in rare cases for specific interactivity needs (useState, useEffect, browser APIs, unsupported third-party libraries), and pivoting to server components whenever possible, especially for proprietary logic, filesystem/database access, or data fetching. It provides examples for Newsletter Sign-up and Product FAQs, demonstrating how to extract client functionality into separate .client.jsx files and rename components to .server.jsx when appropriate.
  10. Rapid Development with Hydrogen: Building a Product Page - ShopifyThis post details how to rapidly build a product page using Hydrogen, a React-based framework for custom storefronts. It covers setting up a new Hydrogen app, integrating Tailwind CSS for styling, creating dynamic routes using file-based routing and the `useRouterParam` hook, fetching product data via the Storefront API using the `useShopQuery` hook, managing state with `ProductOptionsProvider` and `ProductOptions` hook, and implementing a `BuyNowButton`. It also demonstrates using the `MediaFile` component for a media gallery.
  11. Building Blocks of High Performance Hydrogen-powered Storefronts - ShopifyThis post details the use of streaming server-side rendering (SSR) with React's Suspense API for faster TTFB and progressive hydration. It also introduces React Server Components (RSC) for improved performance and reduced bundle sizes, and discusses efficient data fetching with built-in caching primitives and configurable cache policies for the Storefront API. The post emphasizes combining dynamic server-side rendering with edge delivery and client-side fetching based on page and component-level decisions.
  12. How We Built Size.link - ShopifyThis post details the development of Size.link, a web-based tool for visualizing product dimensions in Augmented Reality. It covers the technical challenges of supporting AR on both iOS (AR Quick Look) and Android (Scene Viewer) using different 3D file formats (.usdz and .glTF). The core innovation lies in dynamically modifying the binary data of pre-generated .usdz files to adjust scale and vertex positions on the fly, bypassing slow conversion tools and enabling client-side or server-side generation of AR experiences. It also touches on material customization for visual appeal.