## Introduction

In 2021 at their own Unite event, Shopify announced their own investment in headless commerce with their own React based framework Hydrogen with accompanying hosting called Oxygen. Almost a year later, with the launch of Shopify Editions, Hydrogen & Oxygen have officially gone live. And with it, a new chapter outside of their own native based frontend, liquid has commenced. We expected improvements and updates that will be sure to set this framework in the sights of big brands and ambitious startups. To save any businesses the research, we’ve rounded up everything we know so far and what all of this means for headless commerce.

We expect this article to be updated over time to make sure the information presented is accurate.

## Hydrogen

Announced at Shopify Unite 2021, Hydrogen is Shopify’s answer to an easier, sleeker, headless build for developers and an exciting experience for customers navigating a Shopify store.

The new framework from Shopify uses a React-based frontend that utilises React Server Components. By utilising React, custom storefronts now get a modern tech stack with greater personalisation opportunities that can be built quickly and at scale, without compromising site performance.

## Native vs headless

Before, your eCommerce development team usually had to trade-off between epic site speeds or beautifully designed experiences when using native Shopify. However, with Hydrogen bringing together a host of technologies, including several of Shopify’s most popular partners: Sanity, Contentful, Klaviyo, Recharge, Nosto and Aloglia, they’ve made it possible to achieve both blazing fast site performance and dynamic user experiences through components.

### Benefits of using Hydrogen

- __Starter templates__ — utilising Hydrogen, development teams have access to a starter kit, including a built-out demo store, accelerating development times dramatically. We have predefined our own based on Shopify’s starter. 
- __Pre-built components__ — Shopify has took some of the methodology around their native language liquid with Hydrogen by creating pre-built components and hooks for developers which makes working with the API easier.
- __Server-side rendering__ — Hydrogen has opted to use React Server Components (RFC), which allows your website to progressively load based on priority and the users' navigation rather than loading the entire page at once. This takes away the pain of what most businesses experience with native Shopify by massively improving site speed.
- __Tailwind__ — CSS toolkits aren’t new but we’ve been very fond of Tailwind’s approach for a while now. Its popularity has gotten bigger over years so its no surprise to see Hydrogen opting for it out-the-box. Tailwind offers great flexibility when it comes to structured reusability of components.
- __SEO__ — similar to native stores, Hydrogen includes pre-built SEO optimisations such as an automatically generated sitemap, metadata values for every page, and a customisable robots.txt file.

### Potential drawbacks of using Hydrogen

- __Built for Shopify API__ — Hydrogen is developed for the Shopify API only. Therefore its framework is strongly tied to individual parts of Shopify’s API. Unlike using another React based framework like Next.js, Hydrogen is tightly coupled Shopify so it can only be used to build Shopify storefronts. It doesn’t support other custom storefronts such as mobile apps right now. 
- __Developer-focused workflow__ — Hydrogen is very code-heavy which means everything will need to be built and maintained by your development team or a Shopify Plus agency. Your non-development teams or third parties e.g. marketing, won’t be able to manage the frontend layer of your site. This can be the case for any headless build. Alternatively, you can work with a Shopify Plus agency, like us, who can build and manage your Hydrogen store long-term or up skill your in-house teams. You can reach out to our teams to talk through this in more detail. 
- __App integrations__ — although Shopify has some of their most popular apps ready to be integrated with the Hydrogen already there is no denying that the current list is small (we expect this to change over time). For now if you want an app that isn’t compatible you’ll need to link it yourself using a custom middleware.

## Oxygen

Oxygen is Shopify’s own hosting platform that enables you to host Hydrogen storefronts directly on Shopify Plus in a similar fashion to how native stores are hosted. This is a huge pro as usually you need a third-party platform to host your app like AWS or Vercel, but Oxygen makes that need almost redundant. Instead, you can seamlessly integrate with Shopify by deploying multiple different versions of your Hydrogen storefront to preview, test, and experiment with. Having your headless store coupled together with Shopify via Oxygen will also massively help app integrations now and in the future as well.

Oxygen was built to withstand large amounts of concurrent traffic, again very much in vein of what’s expected from native storefronts. This means for big sales like Black Friday and Christmas, you can expect a very minimal chance of disruption with Oxygen’s robust hosting.

## CMS partners

As part of their official Hydrogen & Oxygen roll-out, Shopify has partnered with two leaders in the headless CMS space, Sanity and Contentful. Both are highly flexible CMS’, that can be tailored to allow merchants too easily update their applications content with ease. Utilising either with Hydrogen & Oxygen creates a powerful stack for any brand to scale with their business.

It is worth mentioning that other CMS’ can still be implemented into your headless stack. However, at this time, it will require a custom integration which will take more time and resources than choosing between Sanity or Contentful. We expect Shopify to announce more CMS partners overtime.

## Shopify API updates

Up until this point, Shopify's Storefront API has been mainly unsuitable for server-side applications. For a merchant, this means you could hit the rate limit, which impacts your site's overall functionality. Shopify has been updating their API to accommodate Hydrogen so it allows the server to make requests on behalf of the merchant, working for many users without hitting a limit, opening up server-side operations that were risky previously. 

## App integrations

One of the big questions circling the industry when Shopify first announced Hydrogen & Oxygen was how the platform’s most popular apps could function in future Shopify stores without an API-integration.

Speculation suggested some kind of middleware was likely the appropriate option but Shopify announced that they will work through a brand new integration. Some popular apps have already released their first Hydrogen compatible apps but with the app store still in its early stages there’s only a handful of apps to choose from compared to native. Of course we expect to see more developers bring their native apps to Hydrogen over time.

## Our analysis

Without doubt headless is the future of eCommerce and Shopify have positioned themselves as firm frontrunners. With Hydrogen & Oxygen, Shopify have democratised headless eCommerce in a healthy way. Whereas it was once the most expensive option and only available to the largest brands with the biggest budgets, now smaller brands have the option to go headless and build next generation eCommerce stores whilst still coupled to Shopify.

We believe this is the beginning of a a huge transitional era for eCommerce. The bar for expected user experience is rising and the overall quality of online shopping is increasing. It’s imperative that brands keep up if they want to have sustained successes.

From here, eCommerce is set to become more customisable and more personalised than we’ve ever seen. The technology is available in headless stores built with Shopify Hydrogen & Oxygen to build stores that recognise individual customers and adapt to their wishes. This is only the beginning, but the best place to prepare for the future is on Shopify.

Headless eCommerce with Shopify's Hydrogen and Oxygen