Hydrogen & Oxygen – the Shopify Stack for Headless Development

Building ecommerce websites with a Shopify theme, integrations, and some level of customization seems sufficient for most businesses. However, in some cases, this standard approach is just not enough. Picture: you need to showcase products synced with your store on the built-in devices, such as a smart fridge screen. It’s not a situation where any of the themes fit. But that’s where Shopify headless development comes in handy – when you use Shopify’s backend while creating a separate custom frontend solution. Which tools do you need to make it all work? This article got you covered since it’s all about Shopify’s headless native tools – Shopify Hydrogen and Oxygen.

TL;DR: Shopify Hydrogen & Oxygen: headless commerce stack

• Shopify Hydrogen is a React-based framework designed for headless development that best fits the Shopify ecosystem. Among Hydrogen’s main features are component-based architecture, server-side rendering, optimistic UI, nested routing, and built-in commerce hooks.

• Shopify Oxygen is a hosting solution for deploying Hydrogen custom storefronts. Its major features are global edge network, smart caching, workers, and observability tools. Oxygen’s pros are easy setup, high website performance, cost-effectiveness, and built-in protection.

What is Shopify Hydrogen

Shopify Hydrogen is a React-based framework that allows you to build a custom storefront that easily syncs with Shopify's infrastructure.

How Shopify Hydrogen works

Hydrogen is an alternative way to build a Shopify store when you don’t need Liquid for coding. Since you’re not limited to just Liquid objects, Hydrogen allows you to implement any designs and custom elements. On top of that, you can connect your custom storefront with any third-party services, such as personalization engines and headless CRMs, using APIs. As Hydrogen’s landing page claims – ‘If it has an API, it works with Hydrogen.’

How to get started? You can install Hydrogen as a sales channel app from the Shopify App Store and use available components to build custom solutions with Shopify CLI.

Learn more technical details on how to get started in the Shopify Hydrogen tutorial in the official documentation.

What is Shopify Hydrogen built on

Hydrogen is built using React Router – an open-source framework on top of React. Other core technologies are as follows:

• React Server Components (RSC) for performance-optimized server rendering

• Vite, which is a highly performant build tool and development server

• Shopify Storefront API for fetching product data, customer accounts, and more

Optionally, you can also leverage Tailwind CSS for styling and Oxygen for hosting.

Which features does this Shopify Hydrogen tech stack ensure?

Shopify Hydrogen key features

Hydrogen provides robust features that make it a choice for many developers who seek efficient headless infrastructure.

Component-based architecture

Hydrogen UI is composed of modular, reusable pieces, allowing you to paste the same components across multiple pages, make updates in one place, and apply them everywhere. On top of that, each component can fetch only the data it needs from the Shopify Storefront API, avoiding overfetching and reducing loading times.

Server-side rendering (SSR)

With SSR in Hydrogen, your page’s HTML is rendered on the server, not on the browser, at the moment of the request. Streaming SSR option also enables customers to see parts of the page they request in real time instead of waiting for a full page to load.

Optimistic UI

Hydrogen leverages an Optimistic UI design pattern, meaning the UI is immediately updated after a user action, even before the server response. As a result, the user sees messages appearing in a chat or an item added to a cart without waiting for the server to confirm the action.

Nested routing

In traditional websites, including those built with Shopify themes, routes are individual pages, meaning each page is isolated. With Hydrogen’s nested routing, each page part can have its own logic, data, and components, still sharing a common layout.

Built-in commerce hooks

Hydrogen includes pre-built components (hooks) for everyday commerce actions, such as cart management and checkout flows. These hooks, tightly integrated with Shopify APIs, allow custom storefronts to be built much faster.

TypeScript support

Hydrogen supports TypeScript, providing enhanced auto-completion and error checks, which improves the development experience and team productivity.

Shopify checkout integration

Although headless, Hydrogen stores still connect to the native Shopify Checkout and support Shop Pay. Since Shopify’s checkout is among the best-converting (it converts by up to 36% better than competitors), this fact adds to Hydrogen’s advantages.

Benefits and drawbacks of using Shopify Hydrogen

As with any framework, Hydrogen has its pros and cons. Let’s see how your business can benefit from using this technology and what limitations to expect.

Hydrogen advantages

Hydrogen empowers brands to break free from cookie-cutter storefronts, letting them benefit from a broad spectrum of features.

1. Complete design freedom

Since you’re no longer using themes, you’re free to design a fully custom storefront that reflects your brand’s authenticity, going beyond standard structures and website elements.

2. Ultra-fast loading

Due to SSR and other features, Hydrogen-based stores load instantly, improving your website performance on any device and boosting your SEO metrics.

3. Better user experience

Lightning-fast speed, smooth interactions, and robust personalization ensure a perfect customer experience across your entire store, from landing and product pages to checkout.

4. Broader talent pool

If you go headless, hiring a Shopify developer is not the only option, since you need a specialist proficient in using the React framework. This way, you can choose from a broader range of developers, not just sticking to Shopify enthusiasts.

5. Rich developer ecosystem

The robust headless tech stack lets Hydrogen developers build complex projects faster, experiencing fewer bugs and getting faster iterations. Additionally, it ensures perfect long-term maintainability and scalability.

Hydrogen drawbacks

While Hydrogen is powerful, it has some challenges that may affect your development workflow.

1. Steep learning curve

Modern web technologies involved in the Hydrogen stack might require some time to master, especially for teams new to headless architecture and more familiar with Shopify’s Liquid templates.

2. Tied to the Shopify ecosystem

Hydrogen is integrated with the Shopify infrastructure, making it centered around this single platform. If you consider using another backend system one day, you may need to rebuild your storefront. It’s also dependent on Shopify API’s rate limits, pricing models, and availability.

3. Relatively new and evolving

Hydrogen was introduced in 2021 and is considered quite a new framework, which results in a smaller community around it and weaker support compared to well-established frameworks like Next.js or React.js.

4. Limited no-code collaboration

Marketing teams may encounter challenges making changes to content, UI, and layout unless you pair your storefront with a headless CMS. By default, Hydrogen is a developer-centric tool, and you need to make changes on a code level, not in a user-friendly theme editor.

Use cases of Shopify Hydrogen

Hydrogen is applicable in many cases, depending on your needs and requirements. Every project is different and unique, but to give you some insights into how to leverage this cutting-edge technology, we’ve compiled a list of the most common use cases.

• Custom Shopify storefront with unique UI/UX. If you have an extraordinary idea, Hydrogen can help you make it real using UI components and custom coding. It also helps you build tailored user experiences and non-standard customer journeys.

• Dynamic product catalog with robust personalization. With Hydrogen, you can display dynamic content, showing products or recommendations based on customer preferences and location in real-time.

• Progressive web apps (PWA) with offline capabilities. Hydrogen can be a basis for building a PWA with an app-like user experience and offline availability. See a detailed case study of how we created a headless PWA for our client, a luxury mattress manufacturer, that required a solution for in-store devices without access to the web.

• Multiple storefronts with a shared backend. If you want to run multiple stores with different frontend experiences, such as for different brands or regions, but the same backend, Hydrogen could be your choice since it has the appropriate flexibility.

Note that if you don’t need heavy customization, using Shopify themes with a low-code setup would be a preferable option for their straightforwardness and cost-effectiveness.

Shopify Hydrogen vs Liquid and other React-based frameworks

Let’s compare Hydrogen with Liquid and other popular frameworks compatible with Shopify – React.js and Next.js.

This brief comparison table makes it clear that Hydrogen's most essential advantage over competitors is its deep integration with Shopify, while it ensures the same as other frameworks' fast loading speed and design flexibility. Hydrogen’s best match in terms of hosting is Oxygen; still, you can use other, more flexible hosting solutions if necessary.

What is Shopify Oxygen

Now, let’s take a look at the second part of Shopify’s native headless tool – Oxygen. It’s a globally distributed hosting solution with over 100 server locations worldwide for deploying Hydrogen custom storefronts.

How Shopify Oxygen works

Once you have installed a Hydrogen sales channel and connected it to your GitHub account to create a repository, you need to run shopify hydrogen deploy in the CLI to generate storefront versions (Git branches) with Oxygen. This action will assign a preview deployment URL. To go live, you will need to change the privacy of your URL from private to public.

What is Shopify Oxygen built on?

Oxygen results from bundling together third-party (Cloudflare) and first-party Shopify services, such as Shopify CDN and Shopify Admin API, designed for the tight integration of Hydrogen projects with the Shopify ecosystem. Let’s map the most essential Oxygen constituents.

• Cloudflare’s globally distributed edge network ensures delivery of your content from the closest server to the end user.

• Shopify’s infrastructure includes the CDN (Content Delivery Network), API, Shopify Identity, and access management systems.

• React Router adapter compiles Hydrogen projects for deployment on Oxygen.

Shopify Oxygen features

Even though Oxygen is designed specifically for Shopify and Hydrogen, it has robust functionality that is just as good as the competition.

Global servers

When you launch a Hydrogen storefront with Shopify, it's automatically hosted on hundreds of servers located around the world – not just in one place. Say, if a customer visits your store from Paris, they’ll connect to a nearby European server, not one in the US. This speeds up page loading and prevents websites from crashing.

Smart caching

With the full-page cache feature, Oxygen remembers pages that people have already visited and saves a quick-to-load version of them. Let’s say a customer has viewed your homepage. Instead of rebuilding it from scratch next time, Oxygen stores a ready-to-go version.

Workers and worker runtimes

Workers are lightweight JavaScript functions that can handle things like routing, redirects, personalization, or API calls – before a page even renders. They make Oxygen-based websites faster, smarter, and more personalized. Worker runtimes are environments where workers are executed that include necessary libraries, APIs, and resources for the task to be completed.

Observability and monitoring

Shopify Oxygen automatically captures logs and performance data for deployed storefronts. This allows developers to see API calls and responses, as well as the time needed for a page to render, redirect, and check errors. Oxygen allows using built-in and third-party tools like Datadog to monitor these metrics.

Pros and cons of Shopify Oxygen

Shopify Oxygen pros

Shopify Oxygen simplifies the complexities of deployment and infrastructure. Here’s what makes it stand out.

1. Easy setup and deployment

Shopify handles the full deployment pipeline, so you don’t need to worry about extra configuration and server management. You can also easily preview and QA storefront versions using Git branches.

2. High website performance

Because Shopify Oxygen uses a global network of servers, your storefront loads quickly for visitors no matter where they are in the world. High website performance is also ensured by smart caching and pre-rendered content.

3. Cost-effectiveness

Oxygen is free for Shopify paid plans, so if its capacity is enough for your project, you don’t need to care about separate bills and additional services for performance optimization or maintenance of backend infrastructure.

4. Built-in protection

Oxygen comes with Shopify security infrastructure, providing an SSL certificate for secure browsing, protection from common web attacks like DDoS, and automatic HTTPS setup. Thus, you don’t need to configure firewalls, certificates, or patches.

Shopify Oxygen cons

Despite its many conveniences, Shopify Oxygen imposes some constraints that may require workarounds or additional tools for advanced use cases.

1. Limited customization

Since Oxygen is closely tied to the Shopify infrastructure, you have less freedom to customize the server setup. If your website requires connecting to special databases or doing unusual data processing, Shopify Oxygen may not support it directly, and you would need additional tools and third-party services.

2. File size restrictions

There are limitations to uploading media files – images, videos, and 3D models. Maximum file sizes for static assets are 20 MB for an image, 1 GB for a video, and 500 MB for a 3D model. Other files should be no larger than 20 MB.

3. Worker file limits

Your workers must be no more than 10 MB; if it’s more than that, you won’t be able to use it in the Shopify store. Workers are also limited to 30 seconds of CPU time per request and can consume up to 128 MB of memory. Exceeding this limit could mean dropped requests.

Shopify Oxygen vs other hosting solutions

To find out whether Oxygen is the right option for your project, see how it differs from other popular hosting solutions – Vercel, Netify, and custom servers like AWS.

As we can see, Oxygen has some advantages compared to other hostings: it’s free, unlike Vercel, Netlify, and custom servers, and it is fully integrated with Shopify and optimized for Hydrogen. Similar to other hosting services, Oxygen supports edge rendering and deploys versions with Git. At the same time, it has weaker monitoring capabilities out of the box.

Go headless on Shopify with DigitalSuits

The success of headless solutions is fully dependent on the development team involved in your project. We at DigitalSuits offer reliable Shopify headless services to ensure the final result meets client expectations and is aligned with their business goals. Our team assists you in choosing the right technologies for your purpose and implementing solutions tailored to your business infrastructure.

To get an even deeper understanding of what we’re capable of, check our portfolio of successfully completed headless projects. Looking for advice on a particular project? Don’t hesitate to contact us for consultation and your project estimation.