Introducing Hydrogen: Shopify’s Headless Commerce Framework

In the past several years, Shopify has been releasing new products and features to support ecommerce brands that want to decouple ecommerce tech stack. One of Shopify’s first products was the Storefront API, which exposes product, customer, and order data to third party applications and presentation layers.

In recent years, JavaScript libraries and frameworks have emerged to support front-ends that are decoupled from the backend. Frameworks such as Next.js and Gatsby, among several others, have grown in popularity as they allow for the creation of highly performant, exceptional user experiences.

In 2021, Shopify announced Hydrogen, a new JavaScript framework specifically designed for ecommerce brands. While still a relatively new technology, Hydrogen gives Shopify customers the ability to create great customer experiences with an increased time to market.

In this article, we’ll introduce Hydrogen by describing what it does, what types of problems it solves for brands, and how it compares with other JavaScript frameworks, such as Next.js and Gatsby.

Jamstack: What is it?

Jamstack is a modern approach to web development based on Javascript, API’s, and Markup (JAM). Jamstack is less a new set of technologies and instead a novel approach to architecting a tech stack. To understand why Jamstack has become so popular in recent years, it’s worth briefly discussing what it seeks to replace: the monolithic, or traditional, tech stack.

A traditional tech stack is tightly coupled in that when a user requests a web page from a browser, the server pulls the appropriate content from the database, integrates that content into a dynamic template, and sends the page back to the client. A disadvantage of this approach, however, is that server resources are required on each request to build a page.

Jamstack, on the other hand, seeks to reduce the server resources necessary to render a web page by decoupling the front-end, or presentation layer, from the back-end logic in order. JavaScript runs entirely in the browser and can be utilized to read and write directly to databases via web API’s (Application Programming Interfaces).

API’s allow the client to do the heavy lifting in terms of data fetching. The browser can bypass the server and fetch data directly from a database or third-party service, such as a Content Management System (CMS) or a Product Inventory Management (PIM) system.

With a decoupled architecture, the need for server resources are diminished even further given how web pages are built and served to the client. Instead of each page dynamically generated on page request, content is built and delivered to a Content Delivery Network (CDN). With this approach, the server only builds new pages if it’s changed, otherwise the content cached with the CDN is delivered to the client. Once the web page is delivered to the user’s browser, the JavaScript can make additional API calls to request more data.

This modern approach to web development offers several advantages over monolithic architecture. Websites are blazingly fast as they are served to a client over a CDN instead of directly from the server. Scaling your website is also much easier as the server is no longer responsible for handling every page request.

React 101

As JavaScript is one of the essential components of the Jamstack, several JavaScript libraries exist to build user interfaces. This article will review React not only because it has become the most popular JavaScript library among developers and brands but also because Shopify selected React as the framework for Hydrogen.

React is an open source front-end library that has gradually become the go-to framework for modern web development. It is primarily used for building user interfaces with significantly less code than if you were to use vanilla JavaScript.

The core building block of user interfaces in React are components. You can think of components as representations of a user interface element, such as a button, input field, or even something as large as a header or footer.

What makes React especially powerful in the building of user interfaces is that components are reusable, allowing developers to build pages very similar to how one would build a Lego set. A button component, for example, can be used on multiple pages but still be customized with unique copy. This cuts down on development time as well as results in a cleaner code base.

What is Hydrogen?

Hydrogen is an open source Jamstack framework powered by React, specifically designed by Shopify to support online storefronts. It is meant as an alternative to the Liquid-powered themes most Shopify brands use to support their storefronts.

Shopify’s Liquid themes employ a monolith tech stack, using server resources on each page render, which can slow down page loading speed when optimizing the site for personalization or handling increased traffic during flash sales. Hydrogen, on the other hand, allows brands to adopt a decoupled, or “headless,” architecture that is uniquely optimized for the needs of ecommerce brands.

Hydrogen can be deployed to any cloud-hosting service, but Shopify Plus customers have the ability to deploy their headless storefront to Oxygen, Shopify’s own hosting service. Shopify Oxygen is deployed worldwide on more than a hundred locations, supporting extremely fast load times for your customers around the world. Shopify Plus customers can select Hydrogen when creating a new sales channel and deploy to Oxygen with relative ease.

Hydrogen utilizes Shopify’s Storefront API to retrieve product, customer, and order information and present it to the user. Hydrogen relies on Vite for its build process, TailwindCSS for styling, and also supports development in TypeScript.

Like other open source React frameworks, such as Next.js and Gatsby, Hydrogen supports fast site speed, especially when compared to Shopify’s default Liquid theme. Hydrogen also allows your brand to connect via API’s to third party services, such as Payment Processors, Inventory Management Systems, and more.

With React powered tools such as SSR (Server Side Rendering) and service worker building, your brand can easily build a Progressive Web Application (PWA) with Hydrogen. PWA’s are essentially websites that behave as an app on a mobile device. They can be saved onto the home screen, send push notifications, and even work offline.

Benefits of Shopify Hydrogen

Shopify Hydrogen is an important addition to the various Jamstack applications available to ecommerce brands looking to go headless with Shopify. But what makes Hydrogen a great choice for Shopify customers? In this section, we’ll cover a few of the most important benefits of Hydrogen.

Commerce components

Shopify makes available several Hydrogen templates for developers to use. The most advanced template comes with Shopify-specific commerce components that reduces the time your developers spend on building your storefront. Your developers would have to build these components from scratch if your brand had selected another JavaScript framework.

Pre-built Hydrogen components can be categorized into different types. Primitive components, for example, are building blocks for different component types, such as product, variants, and cart components. One type of primitive component is a ShopPay component, which renders a button that directs the user to the Shopify Pay checkout flow. Another primitive component is an SEO component that can render SEO information on every page.

Another useful set of components are Cart components, which render information related to products your customers purchase. The CartCost component, for example, renders a price for various products in a cart. A CartLineImage component displays an image for all the products included in a cart.

Shopify-specific hooks

Hydrogen hooks are functions that allow you to use state or other methods from inside components. The useShopQuery hook, for examples, makes queries to the Shopify Storefront API.

In another JavaScript framework, your developers would have to build this hook from scratch, whereas Hydrogen provides this functionality out of the box. Another useful hook is the useCart hook, which gives your developers access to the cart object, against which they can read and write data.

There are currently over a dozen hooks that your developers can utilize as they build out your brand’s storefront. Each of these hooks would need to be built from scratch but are native to Hydrogen, simplifying the development process and speed to market of your storefront.

Streaming Server Side Rendering (SSR)

Streaming SSR allows you to load data in multiple chunks over a network. The data chunks are loaded out of order during page rendering, making a Hydrogen storefront fast and performant.

The main advantage of Streaming SSR is the fast Time to First Byte (TTFB). TTFB is critical for SEO, as Google uses this metric as a ranking factor. A fast TTFB also results in a great user experience as elements of the page start to load immediately, giving the perception of a fast page load.

If a product page, for example, needs to display a dynamic list of recommended products, localized description and pricing, and a custom call to action, Streaming SSR can progressively render these elements and show custom loading states as the page is streamed and constructed by the browser.

React Server Components

The popular JavaScript library has historically been rendered in the browser. Frameworks such as Nextjs added the ability to render components on the server. Introduced with React 18, however, React Server Components now allow developers to select rendering on the server or client at the component level.

It’s still currently in Alpha testing, but Hydrogen has embraced React Server Components and has built it directly into the framework. Developers can interweave server and client rendered components, allowing for the creation of rich client-side experiences with the improved performance of server side rendering.

Built-in caching controls

Caching is an important part of creating a good shopping experience and Hydrogen has built-in cache controls to achieve that. Hydrogen provides two mechanisms for caching: sub-request and full page caching.

Both ensure that your storefront will respond quickly to users while also ensuring that the latest data is available to them. Hydrogen also comes with a number of caching strategies to help you determine which control header to set.

Drawbacks of Shopify Hydrogen

There are a great deal of advantages that come with selecting Hydrogen as your front-end framework. But there are a few potential drawbacks that you should consider.

Dependence on the Shopify ecosystem

Selecting Hydrogen as your framework further enmeshes your tech stack into Shopify’s ecosystem. You may actually perceive that as an advantage, and you may not be wrong about that. Shopify purchased a stake in Sanity, the CMS platform, and it’s likely in the future, Shopify will create integrations to seamlessly manage a decoupled tech stack, which can certainly save on developer resources.

But it’s also important to consider that one of the advantages of the Jamstack is that it allows brands to more easily switch services. By selecting Hydrogen and Oxygen, Shopify’s cloud hosting service, you may find it more challenging to migrate to a different platform in the future.

Shopify App integration

If your Liquid-powered theme relies on many Shopify Apps, it’s important to note that not all Shopify Apps will have API’s. If that’s the case, you’ll have to find new services to replace some of your Shopify Apps.

Additional developer resources

Going headless means that you’ll need more developer resources to handle the additional complexity. This is less of a drawback of Hydrogen and more of adopting a decoupled architecture.

If you’re a small or medium-sized business, it’s very possible that the additional developer resources needed to create and maintain a decoupled architecture is not worth it to your business. It can cost at least $50,000 to build a Hydrogen-powered headless storefront and will take an in-house or agency team more resources to continue to maintain it over time.

Hydrogen alternatives

Hydrogen is just one among several JavaScript frameworks developers can use to build headless storefronts. But how does Hydrogen stack up against various frameworks? In this section, we’ll discuss 2 React libraries with strong developer communities: Next.js and Gatsby. We’ll also compare Hydrogen with Front-end as a Service (FaaS) solutions, such as Shogun, which is also built with React.

Hydrogen vs Next.js

Next.js is a versatile React framework capable of server-side rendering, static site generation, and client-side rendering. It’s a great alternative to Hydrogen if your brand is looking to build a headless storefront. With Next 13, released in October 2022, React Server Components are integrated into the framework, allowing developers to harness both server and client rendered components.

Next.js allows developers to build anything from headless storefronts to social media applications. As a result, many of the optimizations for headless storefronts available in Hydrogen would need to be built from scratch in Next.js.

Shopify has made available Hydrogen’s component library to other Jamstack applications, so developers can still use Next.js to more efficiently build Shopify storefronts. Hooks, however, are not available for use outside of Hydrogen, although your developers can certainly code them from scratch in Next.js.

While Hydrogen is specifically designed for use with a Shopify storefront and would certainly speed up development work on a headless storefront, Next.js can pretty much do anything Hydrogen can. In fact, Next.js may be a great choice if you foresee changing your commerce engine in the future, as Next.js is a powerful yet versatile JavaScript framework capable of integrating with any microservice.

Hydrogen vs Gatsby

Gatsby has historically been known for its static generation of websites, although it is also capable of server and client-side rendering. With static generation, the HTML, CSS, and JavaScript are produced at build time and deployed to a CDN, unlike SSR where the webpage is produced at run time, when a user makes a page request in their browser.

Gatsby can be employed to create marketing and content sites as well as ecommerce storefronts. Unlike Hydrogen, however, it is not optimized for storefronts. While your developers can import Hydrogen’s commerce components into Gatsby, they will still lack the ability to use Hydrogen’s hooks and utilities.

Gatsby has not currently mentioned in their documentation how they plan on incorporating React Server Components into their framework. The potential lack of support for React Server Components makes Gatsby less robust of a solution when compared to Hydrogen and Next.js

Hydrogen vs FaaS solutions

The popularity of the Jamstack has resulted in the emergence of Front-end as a Service (FaaS) solutions. FaaS solutions, like Shogun Frontend, can be powered by React and include a page builder experience. FaaS solutions may also come with a CMS that allows the marketing and content teams to publish content without developer support.

A FaaS solution can be a great alternative to Hydrogen, or any other Jamstack framework for that matter, if you’re looking to give your marketing and content teams the ability to preview and publish content and launch campaigns without taking up developer resources.

Shopify Hydrogen examples

While Hydrogen is still a relatively new technology, released by Shopify in October 2021, several brands have adopted the new framework. In this section, we review 2 brands that found success by integrating Hydrogen into their technology stack.

Denim Tears

Denim Tears is an apparel company created by Tremaine Emory, a highly regarded American designer and creative consultant. Denim Tears hired Kamp Grizzly, an independent agency based out of Portland, to build their online storefront.

Kamp Grizzly decided to take a headless approach with Denim Tears’ storefront as they wanted to create a unique, creative experience without compromising on performance. They selected Hydrogen so their development team could take advantage of the built-in commerce components, hooks, and utilities that would speed time to market.

The agency created a unique storefront with a homepage collage, an abstract product landing page grid, and a component that would archive collections. Kamp Grizzly also integrated Sanity CMS so Denim Tears’ content team could easily manage and update content.

The result is a creative, unique storefront that extends Denim Tears’ brand identity while also being highly performant and easy-to-manage.

Allbirds

Allbirds is an apparel manufacturer and retailer based out of San Francisco, CA. The brand relied on a Liquid-powered theme for their storefront but has increasingly ran into limitations with the platform as they have expanded their product categories, variants, and retail store presence.

They decided to go headless as a way to support their growing business and selected Hydrogen for their online storefront. They are incrementally transitioning their Liquid site to Hydrogen by first building a store locator feature, which they were able to build in 3 weeks given Hydrogen’s built-in commerce components and hooks.

They then built a product page for sold out items, and soon plan to build out all of their product pages in Hydrogen. As they continue to transition the entire site to Hydrogen, they intend to improve site performance while also delivering dynamic, personalized experiences.

Conclusion

Hydrogen is a great choice for Shopify customers seeking to go headless. Hydrogen’s built-in components, hooks, and utilities enable your developers to work faster and speed up time to market. But Hydrogen is still a relatively new technology and all the capabilities provided by Hydrogen are also available with other JavaScript frameworks, such as Next.js, which have larger developer communities.

Shopify has decided to embrace headless as the way to architect tech stacks for medium-size and enterprise ecommerce brands. With Shopify investing in Sanity CMS, they are seeking to build an ecosystem where brands can adopt headless in a seamless and efficient way that reduces complexity and minimizes the investments made in developer resources.

As Hydrogen matures and evolves over time, brands that bet on Hydrogen are likely to see it pay off in the future with a greater level of integrations and features designed to create great customer experiences.