Headless Shopify: Pros and Cons for Hydrogen and Oxygen Plus Alternatives

*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 more hands-on experience with the updates for a longer period of time to confirm if they meet our expectations.

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

While meeting at a conference last year, we discussed the topic at length. I’d been having discussions with some larger brands about moving to Shopify and potential solutions to their complex requirements. Michal ran me through a wealth of 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 toward 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 something similar to Commerce Layer, CommerceTools, BigCommerce, or others. Releasing their own way to achieve all of the benefits offered by 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 skepticism, it became evident when digging into the technology more that this Shopify proposition and the overall objective was a really optimistic and 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. In other words, all of the aspects that initially put Shopify on their current trajectory.

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

• A frontend JS framework for development, such as React, Angular, Vue.js, or Next.js.
• One of several API-based content management systems, such as Contentful, Prismic, or 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 the preference of the development agency. 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:

• 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 before the introduction of Hydrogen and Oxygen had a choice: invest in Shopify's reliable native tech stack (Liquid/Online Store) or tap into the potential for customization with a more versatile headless architecture. Both of those choices came with their benefits and drawbacks:

• Online Store/Liquid allows for the fast and reliable development of an eCommerce site. Merchants 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 content-heavy sites, going with Liquid essentially disqualifies the usage of any modern content management system (CMS).
• Headless architecture can be a versatile and future-proof approach. There is virtually no limit to adaptions when it comes to custom business flows. It enables a composable approach where merchants can choose tools to best fit their present needs 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 and is 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 recognized 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 the storefront built in, ready to use, or easily integrated with Shopify, a Hydrogen React-based framework makes building headless storefronts fun.

Hydrogen promises to seamlessly blend the advantages of headless and liquid-based architectures to provide 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. That means:

• Medium to large-sized established brands.
• Design-driven brands with requirements around unique user experience.
• Technical limitations in the current setup or specific requirements around SEO and page speed.
• Likely complex internationalization requirements
• Potentially established omnichannel considerations: in-store experiences, apps, etc.

These are applicable when a brand has the technical internal capabilities of building and maintaining the store themselves or has access to 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 who will have a good grasp on the compromises and impacts 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, when 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 the best fit immediately for really large and ambitious brands. These brands building at this point would likely compromise less and have less risk with a more conservative headless solution, such as the options outlined above. Having said that, compromise comes with any platform or vendor selection and there is 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 trust 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, there 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 interesting examples, too.

Allbirds

Allbirds has been one of the original high-profile success stories for Shopify in this rise of the direct-to-consumer (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 first glance that there is any difference to a standard Liquid build; the standard URL structure still is in place, and there is no significant difference in load speed to the user. There are small, nice touches such as the Allbirds logo on the page load transition.

But under the hood, there are complex international considerations: localizing onsite to serve 35 countries and running 50 retail stores. A mobile app also integrates Shopify via a storefront API taking orders and a real omnichannel architecture that maximizes the tech stack.

SKIMS

Skims would similarly count as a Shopify poster child and the second 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 user experience (UX) across the site still has a lot of room for improvement and isn’t visually exceptional. Again, nothing would jump out as being unique from how it would look with a Liquid theme.

But one thing that does stand out and 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

Denim Tears

There are a few other good case studies, and some are 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 internationalization. But it’s 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 optimization 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, such as 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 the 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, such as Storybook, for example, and exposing them publicly are limited. If your application requires more advanced build flows, you must rely on different solutions, like 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, they are deployed to production or one of the testing environments. This includes preview deployments for any branch pushed to the repository.
• Global content delivery network (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, Internationalization, and Performance Advantages

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

• Regionalized content: On top of translating the content, merchants can serve different content for any region.
• Fine-tuning SEO: Since Hydrogen takes 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, such as /collections or /products.
• Performance optimization: Hydrogen headless architecture allows for the fine-tuning of virtually every aspect of how a site loads. It raises the limit of what can be achieved in terms of performance compared to Liquid-based builds. One of the most prominent areas of optimization is full control over server-side rendering, such as 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.
• Customized marketing strategies: The headless architecture enables greater personalization abilities, like 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. Additionally, integrations could benefit from Hydrogen's ability to control the caching strategy for each request.

Potential Native Support for Shopify Functionalities

On the surface, Hydrogen uses the same way of communicating with Shopify, the Storefront API, as any other framework. However, underneath, Hydrogen has a potential advantage given that 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 with 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 and Cloudflare. We can also see more brands adopting Hydrogen to their needs soon.

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

At this 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 completely overhauled 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 that is 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 after the Hydrogen project was started, RSC is only starting to get traction, and other frameworks have just begun to catch up, Next.js 13’s 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 of those can potentially take 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 enhanced the potential for success for Hydrogen. The technology is already proven and validated and has fewer obstacles to adoption, either by headless developers or Shopify native ones. With the renowned open-source talent on board, the 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. This means 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 grain of salt because all those parts are responsible for handling most application business logic. On a positive note, all of the code responsible strictly for presentation, like styles and components, could 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 high. While it 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 highlights how seriously Shopify was taking this project and the engineering talent and resources behind it.

This new approach is a bit more conservative, building up from a framework that is already established in the market (Remix) and utilizing 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 to suggest Hydrogen for a major build right now, we feel optimistic that in six months this will be a completely different story and become a major consideration.

Liam's Thoughts:

I’ve touched on it above, but my outlook for the imminent release and near future of Hydrogen and Oxygen is positive. 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 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.
• A 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 well. More widespread agency adoption will increase over time, which, in turn, leads to Hydrogen being more commonly utilized for new projects. The risk of agency lock-in for merchants is also reduced.
• Looking much longer term for a bolder prediction, Hydrogen could become the default choice for Plus merchants with, potentially, some sort of theme store equivalent for native integrations with common tech vendors like Yotpo review blocks, Klevu search bars, etc. This aligns somewhat with the Commerce Components’ announcement in the last two weeks.

Michal's Thoughts

It’s not easy to assess the future of Hydrogen and Oxygen. We can only rely on information from official Shopify communication 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, such as Shopify Functions, Web Pixel API, Multipass, etc., are significant improvements that will have a clear impact, especially for headless stores.

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

• A gradual path of adoption from the Online Store. This means merchants already on an Online Store can migrate to Hydrogen site by site. Imagine prioritizing migrating only the product display page (PDP) site to increase conversions and 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 incentivized to invest time and effort into creating a headless compatible version of their apps. This, in turn, could start a chain reaction and accelerate Hydrogen adoption.

As outlined at the start, Shopify has just released their Winter ‘23 Editions and, combined with a lot of good content, is the confirmation on a schedule of the Remixd release of Hydrogen. We’re excited to pick this up and start using it in a practical way and can hopefully 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 insights. Feel free to contact Michal and Liam with anything you might have!