Headless Shopify - Hydrogen & Oxygen Pros & Cons + Alternative Routes

*Disclaimer: This article was written before the February release of Shopify Editions. While most of the predictions and hopes in here for Hydrogen updates still stand up, we will need to follow up after getting hands-on with the updates for a longer period of time to confirm if it meets our expectations.

For this article, Liam Quinn (Vervaunt) & Michal Klim (Commerce-UI) have teamed up to give a broader insight into the current state of play with Shopify’s Hydrogen and Oxygen offering, the technical capabilities and limitations, and how they could progress in the near future.

Meeting at a conference last year, we’d discussed the topic at length. I’d been having discussions with some larger brands on moving to Shopify and potential solutions to their complex requirements. Michal ran me through a wealth of the research and practical examples of Hydrogen that he had been working on, and how its application stands up in the real world. We decided that between us we could deliver a broad but specific review of the technology, with practical takeaways.

For brands moving towards headless architecture, a cynical view of the Hydrogen and Oxygen announcements could be that this was a reflex response to the fact that some key brands that Shopify wanted to be aligned with were looking beyond the liquid theme structure that came natively with the platform. While other headless stacks were being integrated with Shopify as the checkout and underlying system, the likes of Chilly's proved that it would be in a much less significant part of the architecture, and much more feasible to then switch out the ecommerce platform for the likes of Commerce Layer, CommerceTools, BigCommerce or others. Releasing their own way to achieve all of the benefits offered from a headless build, but in some form of unified architecture, would be an effective way of reducing this churn before it became more common.

However (with less scepticism) it became evident when digging into the technology more, that this Shopify proposition and overall objective was a really optimistic and an ambitious one. The long term goals would mean brands would remain more closely embedded into the Shopify ecosystem, but it would eliminate a lot of the risks associated with headless builds.

Risks included potential technical debt, agency lock-in, and increased development effort in maintenance and common tasks - all of the aspects which initially put Shopify onto the trajectory they have been on.

Previously, the tech stack for a headless build might shape up something like:

• A frontend JS framework for development such as React, Angular, Vue.js, Next.js.
• One of several API based content management systems, such as Contentful, Prismic, Sanity.io implemented into the above selection.
• Deployment and hosting managed by automated platforms such as Netlify or Vercel.

These might be mixed and matched (or replaced with other options) depending mostly on development agency preference. With the announcement of Hydrogen and Oxygen (aside from being a bit of a slow burn for both to be at a useable point) this could instead look like the following:

• Hydrogen as the base JS framework.
• Sanity.io or Contentful implemented via native integration.
• Deployment and hosting managed via Oxygen.

But with the release and ongoing work around this new infrastructure, we explored whether the deliverable from Shopify was as strong (or stronger) than the established big hitters that already have some traction.

Merchants seeking ecommerce success prior to the introduction of Hydrogen and Oxygen had a choice: invest in Shopify's reliable native tech stack (Liquid / Online Store) or tap into customisation potential with a more versatile headless architecture. Both of those choices came with their benefits and drawbacks:

• Online Store / Liquid allows for fast and reliable development of an ecommerce site. Merchants could start development from multiple, well-maintained templates and adapt those to their needs. On top of that, most Shopify apps only support liquid-based sites. However, Online Store lacks when it comes to building custom ecommerce flows. Integrating with third-party solutions is generally limited to what is supported by Shopify apps. When it comes to editorial-heavy sites, going with Liquid essentially disqualifies the usage of any modern CMS.
• Headless architecture can be a versatile and future-proof approach. There is virtually no adaptation limit when it comes to custom business flows. It enables a composable approach when merchants can choose tools to fit their present needs best and swap them one by one when the time comes. However, the headless approach is much more demanding both in terms of raw development cost and the governance effort needed to maintain the site properly. Also, finding a proper technological partner could be much harder, being crucial to the project's success at the same time.

So, where does Hydrogen sit in this equation? Simply put, Hydrogen is a headless framework built on top of React. It competes with technologies such as Next.js, Nuxt, and Gatsby, just to mention a few. The above solutions are battle-tested and come with a vast ecosystem of libraries and established best practices for common problems. Hydrogen, a recent tool, may seem like an underdog compared to those widely recognised technologies. Up until now, Hydrogen hasn’t gained comparable traction and has lacked the maturity of the competition.

Yet, Hydrogen focuses solely on implementing Shopify APIs rather than being a general development framework. Being developed by Shopify's in-house team gives it a lot of bonus points when considering what technology is best suited for Shopify-based ecommerce.

According to Shopify:

With the hardest parts of storefront built in, ready to use, or easily integrated with Shopify, Hydrogen React-based framework makes building headless storefronts fun.

Hydrogen promises to seamlessly blend the advantages of headless and liquid-based architectures, providing users with a fast and reliable way to build custom solutions tailored to their needs.

Right now, the short answer is that the initial target market for a Hydrogen build is the same as those who would be considering any other headless build architecture. Without going too in depth on commonly written about ground, this would look something like:

• Medium to large size established brands
• Design-driven brands with requirements around unique user experience
• Technical limitations in current setup, or specific requirements around SEO and Pagespeed.
• Likely complex internationalisation requirements
• Potentially established omni-channel considerations: in-store experiences, apps etc.

Where a brand has the technical internal capabilities of building and maintaining themselves (or a really good and trusted agency). If the latter, our strong belief is that the success of the project depends on at least having an experienced and technical Product Owner, Ecommerce Director or CTO role that will have a good grasp on compromises and impact of key decisions to the outcome before they are made.

As time goes on, the learning curve for developers and barrier to entry for medium sized and smaller brands will certainly come down - much like the growth of Shopify in the first place. I can see a time eventually where this is the technical route for any established brands (basically anyone on the Plus plan). Although this is likely some way off yet.

There are some limitations with both Hydrogen and Oxygen (which are detailed more below) meaning they are probably not best fit immediately for really large and ambitious brands. These brands building at this point in time would likely compromise less and have less risk with a more conservative headless solution, as per some of the options outlined above. Having said that, compromise comes with any platform or vendor selection and there are already a selection of strong case studies to argue that despite any of these limitations, they may not be hard blockers.

As with any ecommerce platform or new tech vendor, you’re only as good as the paying brands that are signed up and trusting your services. With Hydrogen and Oxygen being very unknown to Shopify agencies and brands already in the ecosystem (plus a bit of a gradual rollout after announcing), it felt like there was a lot of waiting to see how it would go across other case studies before brands took the plunge and committed themselves. For this reason it has been a slightly slow uptake. But as would be expected, Shopify did have a couple of hero brands in place to make sure some high profile case studies did exist, and there are also one or two other really interesting examples too.

Allbirds

Allbirds have been one of the original high profile success stories for Shopify in this rise of the DTC brand era. So it wasn’t a huge surprise that they’d continue to be the poster child with a Hydrogen site rebuild. But given the size they are now, it is a big statement of confidence that they would go all-in with it.

It might not be super noticeable at a glance that there is any difference to a standard Liquid build - standard URL structure still in place, and no significant difference in load speed to the user. There are small, nice touches such as the Allbirds logo on page load transition.

But under the hood there are complex international considerations: localising onsite to serve 35 countries, and running 50 retail stores. A mobile app also integrates Shopify via storefront API taking orders. A real omni-channel architecture, maximising the tech stack.

SKIMS

Skims would similarly count as a Shopify poster child, and the second really high profile early adopter of Hydrogen and Oxygen.

Similarly, they’ve also scaled to a huge extent and are serving a large number of regions internationally with their setup. Being critical, the UX across site still has a lot of room for improvement and isn’t visually exceptional - again nothing would jump out as being really unique from how it would look with a Liquid theme.

But one thing that does stand out, and really sets the site apart from a typical Liquid build on Shopify is the load speeds when browsing the site. It is rapid. I’m always keen to stress that a Headless build in general doesn’t equal a lightning fast site, but it creates the potential for it if built well. They’ve done a fantastic job with this, and it starts to show the potential performance benefits that can be achieved with Hydrogen.

Denim Tears

There are a few other good case studies, and some on the Shopify site that are worth looking at. But Denim Tears stands out for me as the other one to showcase here.

It’s not as high profile a brand, and looks like a much simpler setup for internationalisation. But it’s really distinctive and a lot of consideration has gone into creating a unique UX. It also isn’t restricted to Shopify’s native URL structure, which can be seen when browsing the product categories, or stories section. The full on the Hydrogen website is definitely worth a look.

Hydrogen is a Shopify-focused toolkit and a fully functional headless framework at the same time. When assessing its potential and capabilities for development teams, it's important to evaluate how well Hydrogen performs in key areas like functionality, performance optimisation strategies, third-party integration capabilities, and developer experience.

Server Management and Deployment Handling

Hydrogen was released with its counterpart Oxygen – a Shopify hosting platform responding to platforms such as Netlify and Vercel. However, Oxygen is limited compared to those platforms:

• It is only possible to host one Hydrogen build per store. It severely constricts the ability to create several portals (a custom wholesale site, for example) with one common database of the products. Merchants are forced to fall back to a multi-store setup in this case.
• Support for Hydrogen based projects only. The imposed project structure is required.
• Lack of ability to connect any log drain service. Logs are stored for 72 hours maximum.
• Lack of support for mono repo architecture. More advanced flows like building additional applications (Storybook, for example) and exposing them publicly are limited. If your application requires more advanced build flows, you must rely on different solutions (i.e., GitHub actions) and scatter your build pipeline configuration, which could generate additional costs.

At the same time, it got the essentials right:

• Out of the box, support for multiple development environments and seamless integration with popular development platforms such as GitHub.
• Continuous deployment (CD) - every time the development team pushes code changes, those are deployed to production or one of the testing environments. This includes preview deployments for any branch pushed to the repository.
• Global CDN - Oxygen collaborates with Cloudflare, which is the best solution when it comes to building global delivery networks. This means that the site is served to the client from the nearest location, drastically reducing loading times.
• Developer experience (DX) - Setting it up requires minimal effort. Realistically setting up a project with a shareable URL address takes no time.

Hydrogen projects could also be deployed to Vercel and Netlify. However, you shouldn’t consider this a viable option. From the start, we lose the ease of setup and native Shopify support. Also, in the future, Shopify could lock in some of the Hydrogen features through its connection to Oxygen.

SEO, internationalisation, and performance advantages

Hydrogen, being a headless framework, gives merchants control over more complex business flows. Consider the following example cases:

• Regionalised content - On top of translating the content, merchants can serve different content for any region.
• Fine-tuning SEO - Since Hydrogen is taking full control over how and what information is rendered on the site, it gives the ability to adjust every aspect of SEO presence. Think of dynamically generated open-graph images and custom templates for meta-titles and descriptions, for example. A big advantage could be a complete control URL structure rather than being limited to Shopify default structure (i.e. /collections or /products)
• Performance optimisation - Hydrogen headless architecture allows fine-tuning of virtually every aspect of how a site loads. It raises the limit of what could be achieved in terms of performance compared to liquid-based builds. One of the most prominent areas of optimisation is full control over server-side rendering (static builds, caching, and the ability to control exactly how much data is sent over to the client). In contrast, native Shopify is limited and lacks granular control.
• Customised marketing strategies - The headless architecture enables greater personalisation abilities (serving different content for customer segments, for example).

External CMS integration

One of the most common reasons for going with headless is the ability to choose a third-party CMS like Sanity or Contentful and expand the editorial capabilities of the site. Hydrogen can fully integrate with any third-party service that exposes API, much like any other headless solution on the market. Moreover, integrations as such could benefit from Hydrogen's ability to control caching strategy for each request.

Potential native support for Shopify functionalities

On the surface, Hydrogen uses the same way of communicating with Shopify (Storefront API) as any other framework. However, underneath, Hydrogen has a potential advantage, given it is served using Oxygen. Shopify can expose some internal mechanisms in a secure way much easier than through the public API.

At this point, there are no major functionalities exposed strictly to Hydrogen. However, we are witnessing less obvious functionalities being handled only thanks to the Shopify team's internal knowledge. A good example would be support for reporting analytics data to the Shopify Reports tab. This functionality may be an obvious essential for merchants. However, it is not easily exposed to other third-party headless frameworks.

Shopify must carefully manage the delicate balance between delivering increased value with Hydrogen and upholding their relationship of trust amongst developers. Yet, users will likely gain an enhanced experience due to pre-existing abstractions of complex functionalities handled exclusively by Shopify's team.

Hydrogen and Oxygen are both very ambitious projects capable of making an impact in an already crowded space. Shopify brought an exceptional development team and established relationships with industry leaders like React or Cloudflare. We can also see more brands adopting Hydrogen to their needs promptly.

Hydrogen is still in the early phase, which must be considered when utilising it as the backbone of our application. An early-stage technology often suffers from rapid direction changes and a lack of established community and best practices around it. It isn’t necessarily a roadblock. However, merchants considering Hydrogen should understand that navigating through those early days of any technology requires a skilful development team.

At this point in time, we also have to consider that a new major version of Hydrogen has been announced:

On Halloween 2022, Shopify stirred the pot with a novel investment in Remix – an up-and-coming framework that had been catching developers' eyes for some time. This unexpected move sent questions and speculations soaring through the entire Shopify sphere regarding how it will impact Hydrogen's future prospects. We didn’t have to wait long for more in-depth announcements in the form of a new Hydrogen roadmap. In a nutshell, it states that we should expect a complete overhaul version of Hydrogen (built on top of Remix) at the end of February 2023.

After a year on the market, Hydrogen's decision to reconstruct its entire framework may seem controversial. But looking deeper reveals that it could be a thoughtful move for them, teeming with potential for real success.

Hydrogen was very ambitious from the beginning. The team behind it made a brave decision to bet on React Server Components (RSC) (a technology that was not production ready at the time). Yet the decision wasn’t unfounded, RSC opens a whole new world of possibilities when it comes to performant site rendering.

The general adoption of RSC is one of the most anticipated shifts in the development space. However, one has to understand that technological shifts of this magnitude don’t happen overnight. Almost two years later, after the Hydrogen project has started, RSC is only starting to get traction, and other frameworks have just begun to catch up - Next 13 latest announcement being one of the more notable examples. 

Developing a successful framework is no small feat, especially when leveraging cutting-edge technology. Crafting documentation, fostering community outreach and support, establishing proper release strategies, and devising effective promotion methods are just some of the many obstacles that stand in the way of true success - each potentially taking years to conquer.

To truly understand the Hydrogen transformation, we must look closer at the Remix itself. It is a comprehensive and versatile framework created by two renowned tech industry icons, Michael Jackson and Ryan Florence. The pair are well-known for creating the widely used react-router library and being experienced open-source software developers with an impressive portfolio of projects. Although much less popular than Next.js, Remix generally gathered positive feedback and a committed community around it.

Remix, similarly to Hydrogen, is also built on top of React. However, it stands out from other frameworks regarding its core assumption. It focuses on web standards and native web functionalities, which may also sound appealing to developers experienced in Shopify Liquid-based solutions. And it may be a huge deal.

Potentially, Shopify's acquisition of Remix has zoomed the success potential for Hydrogen. The technology is already proven and validated, with fewer obstacles to adoption. Either by headless developers or Shopify native ones. With the renowned open-source talent on board, new Hydrogen has a strong upper hand in building global recognition. The way all these pieces are coming together looks rather impressive.

Hydrogen 2 is rebuilt from scratch. Meaning that key parts of any application, like data loading, routing, error handling, mutations, and state management, will have to be adapted to the new approach. Although the official roadmap states:

If you’re building on Hydrogen today and wondering what this means for you, we expect that more than 90% of your code will stay the same, with provided guides and tools to help with the rest. Below we’ll get into the core changes that are coming, the motivations behind them, and our planned designs.

Take this with a pinch of salt, given that all those parts are responsible for handling most application business logic. On a positive note, all of the code responsible strictly for presentation (styles, components) could rather be migrated as is.

With no official developer preview currently available, experimenting via migration to Remix is a great way to assess true compatibility between versions before jumping into full implementation. Essentially Hydrogen 2 aims to be a thin Shopify wrapper around Remix.

Given all of the above, our overall feeling is that Hydrogen initially was aiming for a really high bar. While it really achieved a lot, it probably fell just short of being the production ready first choice for any Shopify (or other) brands to go headless in the most effective and scalable way. The RSC implementation outlined above really highlights how seriously Shopify were taking this project, and the engineering talent and resource behind it.

This new approach is a bit more conservative, building up from a framework which is already established in the market (Remix), and utilising that with its core team in place. This is enormous leverage, and the combination of what was achieved with Hydrogen, and what Remix can bring to help improve further, should be a major recipe for success. Nothing is certain of course, and such a major release like this will always take some time to iron out any kinks and become robust. But while we'd be hesitant suggesting Hydrogen for a major build right now, we feel optimistic that in six months time this will be a completely different story and it becomes a major consideration.

Liam's Thoughts:

I’ve touched on it above, but my outlook for the imminent release and not so distant future of Hydrogen and Oxygen is a positive one. We will obviously know more in the next month or so if all remains on course, but if all goes well I think it could eventually be a game changer for established brands moving or remaining on Shopify.

We have already seen the likes of Mattel and Supreme moving to Shopify, with specific nuances requiring the platform to be flexible to their needs. I think Hydrogen opens the door for this to be much more commonplace, and expect more high profile brands to follow suit. Some of my final thoughts for the future are:

• The uptake of Hydrogen and Oxygen will increase and gain momentum as time goes on.
• Growing number of high profile brands in the ilk of Allbirds and Skims will go in this direction.
• I think early adopters from a development partner agency point of view will do really well. More widespread agency adoption will increase over time, which in turn leads to Hydrogen being more commonly utilised for new projects. Risk of agency lock-in for merchants also reduces.
• Looking much longer term for a bolder prediction, Hydrogrogen could become the default choice for Plus merchants. Potentially with some sort of theme store equivalent for native integrations with common tech vendors like Yotpo review blocks, Klevu search bars etc. - which aligns somewhat with the commerce components announcement in the last fortnight.

Michal's Thoughts

It’s not easy to assess the future of Hydrogen and Oxygen. We can only rely on information from official Shopify communications channels and development-related sources. And those are inclined more toward publicity.

However, given what we know, I'm choosing to be optimistic. I believe that the decision to scrap the previous version and make a fresh start was an informed one and a change of focus from experimentation to building a viable solution for real-world problems.

Aside from Hydrogen and Oxygen, the overall Shopify movement toward more composable architecture is not without significance. The introduction of Commerce Components, stable and resilient Storefront API development, and numerous new APIs (Shopify Functions, Web Pixel API, Multipass, etc.) are significant improvements, clearly impacting especially headless stores.

I'm looking ahead to two promising prospects that may come to a realisation soon:

• Gradual path of adoption from the Online Store. It means merchants already on an Online Store can migrate to Hydrogen site by site. Imagine prioritising migrating only the PDP site to increase conversions leaving the rest of the store as is for the time being. Suppose the Shopify team delivers on that promise? In that case, I see this as the biggest game changer for Hydrogen as well as the whole Shopify ecosystem and its shift toward headless and composable architecture.
• More and more Shopify apps acknowledge headless architecture with the growing adoption of Hydrogen. At some point, assuming that Shopify will continue its current trend, app developers will be much more incentivised to invest time and effort into creating a headless compatible version of their apps. This, in turn, could start a chain reaction, accelerating Hydrogen adoption.

As outlined at the start, Shopify have just released their Winter ‘23 Editions and, amongst a lot of good content, is the confirmation on a schedule of the Remix’d release of Hydrogen. We’re excited to pick this up and start using in a practical way, and hopefully can update when we learn whether it now hits all of the requirements we’d hope for to be a robust and widely usable solution.

As ever, we would love to hear any questions or further insight - feel free to contact Michal and Liam with anything you might have!