Shopify: Hydrogen Remix and Oxygen

January 2, 2024
ShopifyHydrogenRemixOxygenE-commerce

Shopify's Hydrogen Remix and Oxygen are innovative solutions designed to enhance the e-commerce experience for developers and merchants alike. Hydrogen Remix is a React-based framework built with Remix that allows developers to build custom headless storefronts easily. It leverages the power of React, offering a streamlined approach to create dynamic and engaging user interfaces. The Remix aspect integrates seamlessly, providing a robust toolkit for handling data loading, mutations, and server-side rendering, which ensures fast and efficient storefronts.


Oxygen, on the other hand, is Shopify’s specialized hosting platform tailored to support Hydrogen projects. It offers a seamless integration with Shopify’s ecosystem, making it easier for developers to deploy and manage their Hydrogen-built storefronts. Oxygen's infrastructure is optimized for performance and reliability, featuring global CDN capabilities through a partnership with Cloudflare. 


Hydrogen has been released alongside Oxygen, a Shopify hosting platform designed to compete with services like Netlify and Vercel. However, Oxygen has several limitations. It allows only one Hydrogen build per store, which restricts the ability to create multiple portals (such as a custom wholesale site) using a shared product database. Merchants are thus forced to resort to a multi-store setup.


Oxygen currently supports only Hydrogen-based projects, requiring a specific project structure. It lacks the ability to connect to any log drain service, with logs stored for a maximum of 72 hours. There is also no support for monorepo architecture, limiting the ability to build and publicly expose additional applications (such as Storybook). More advanced build flows require alternative solutions (such as GitHub actions), leading to a scattered build pipeline configuration and potentially higher costs.


Despite these limitations, Oxygen gets some things right. It offers out-of-the-box support for multiple development environments and seamless integration with popular development platforms like GitHub. Continuous deployment (CD) is enabled, so code changes pushed by the development team are deployed to production or a testing environment, including preview deployments for any branch pushed to the repository. Oxygen collaborates with Cloudflare to provide a global CDN, serving sites from the nearest location to clients, drastically reducing loading times. The developer experience (DX) is enhanced by a minimal-effort setup process, with a shareable URL address available quickly.


With all the features and full backing of Shopify Hydrogen/Oxygen is a strong architecture for a headless Shopify store.