Everything you need to know about Shopify Hydrogen and Oxygen

Shopify Hydrogen is a new framework for building Shopify stores based on JavaScript and React. Previously, Shopify store development was only available with Shopify Liquid, the platform’s in-house coding language, and whilst Liquid is a solid coding solution, it does have limitations particularly with regard to site performance. Introducing JavaScript and React has improved the possible Shopify store experience and opened a world of opportunities for building unique stores on the Shopify Platform.

Those familiar with headless development practices on Shopify Plus will know that React is a common choice for building headless stores. These stores are more advanced than native Shopify solutions and are capable of delivering more flexible, memorable and scalable e-commerce experiences for the customer.

Shopify recognised this and moved to harness the power of headless development in their core setup. Hydrogen and Oxygen are Shopify frameworks and hosting solutions that power headless stores. By keeping the framework and hosting in-house, headless stores become more affordable and accessible to a wider range of e-commerce brands.

More brands now have the opportunity to deliver the top e-commerce experience from their Shopify platform, which we predict will subsequently raise the general standard of e-commerce stores.

In addition to the Hydrogen launch Shopify prepared a list of React components that are ready to seamlessly integrate into its new stores. They’ve improved the development process and made developer experiences more fun and enjoyable. 

Fun is a hugely important factor for Shopify’s CEO Lütke. He thinks it’s an underrated experience in the business world and should be seeked out and celebrated at work as much as possible (watch this video for proof). By making the development process easier with Hydrogen’s new React components, Shopify is more fun to use. More fun = a vastly improved end product.

Shopify Oxygen is the new platform for hosting Hydrogen storefronts directly on Shopify. In the past, a big trade-off for building a headless project was the need to source (and pay for) third-party React hosting. With Oxygen, however, React-based Hydrogen stores can integrate seamlessly via the Shopify Storefront API.

Shopify Oxygen is deployed regionally around the globe at hundreds of local server locations. Shopify have invested massively into an infrastructure of worldwide hosting points that mean stores are only ever milliseconds away from their customers. Combined with the new checkout APIs also launched during the 2021 Shopify Unite Conference, store owners can sell 100,000s of products every minute without even breaking a sweat.

In November 2022, the Shopify Hydrogen and Oxygen toolkit has been up and running for a full quarter. Tons of developers now work with it and stores are being prepped and launched all around the world.

We launched a first-of-its-kinds Shopify Hydrogen store for the latest Patta x Tommy Hilfiger collaborative drop: a collection of clothes and accompanying record to celebrate 30+ years of NYC hip-hop culture.

Throughout the whole period Shopify have kept on top of live feedback from developers and business owners, modifying and adapting the technology as and when new data has come to light. We’re proud to say that our team has been closely involved with the Alpha testing process,  working closely with the Shopify team to suggest optimisations.

Now they’re taking stock and preparing Shopify merchants for the new phase of Hydrogen and Oxygen with some big updates coming in 2023 Q1.

Remix

Without a doubt the most significant addition so far is the Remix framework. Widely considered one of the best React frameworks in the world, Remix is an elite level development tool. Ask any developer and they’ll likely list Next.JS as the number one React framework and Remix as number two. Downloaded over 1 billion times worldwide, it’s a major player in web development and a hugely successful software.

Shopify have recently acquired Remix.run and brought it into the heart of the Hydrogen and Oxygen tech stack. The Remix team is widely considered to be one of the finest React teams around the world, and now they’re working right in the heart of the Shopify operation.

So what does this mean? Above everything it’s a signal of intent. Shopify are going all in on React. They’re buying into the best frameworks and putting together the best possible environment to build Shopify stores with React. It’s even rumoured that the Shopify website itself will soon be rebuilt on the React stack.

Hydrogen and Oxygen are clearly central to Shopify’s future plans. They’re not a subplot, they’re the main characters for whichever direction Shopify is looking to go next. Shopify developers now have direct access to the Remix framework when building sites, giving them some of the best tools around to build next generation e-commerce experiences.

E-commerce performance

Since launching Hydrogen and Oxygen, it’d be a lie to say there’s been no teething problems. Site performance, a necessity for effective e-commerce, is an obsession for Shopify and there have been issues with Hydrogen stores.

However the work Shopify have already put in and continue to undertake to rectify any issue is highly commendable. The Remix acquisition is definitely a part of this. Whilst many consider it the second best React framework in the world, for Shopify development (and e-commerce development more broadly) it’s arguably the better option because it often leads to higher performing websites.

Next.JS is loved worldwide for its completely open structure: as a developer, you’re essentially free to do whatever you like within the framework, giving an unparalleled developer experience. However, with no rules comes the potential for massive differences in build quality and performance levels. 

Remix is structurally much stricter. It forces developers to code a certain way, coercing them down a path towards a specific vision of how a website should run. This largely mirrors the Shopify philosophy. Shopify is a highly opinionated platform when it comes to e-commerce web development. They fully believe in a singular vision for how a store should be built, and they want Shopify developers to adhere to certain principles.

Why? Because following those principles brings improved site performance and subsequently higher conversion rates. Conversion should be the key driving factor behind any e-commerce web development project. It’s what differentiates an e-commerce development project from any other kind of website build.

E-commerce web developers should keep conversion in mind throughout their work, and coding within strict boundaries helps to keep this focus. The Remix structure forces developers to maintain focus, arguably making it the perfect framework for Shopify to manifest fast and effective stores for their customers.

Okay this bit is for the devs and the tech-heads If you’re not into the intricate stuff, feel free to keep scrolling and read our analysis below.

Shopify have already highlighted a number of areas where changes and updates are coming for Hydrogen developers. Let’s take a look at them:

Data loading

Shopify’s acquisition of Remix has changed the way data loading takes place within Hydrogen builds. Previously reliant on React Server Components, Remix makes the transition to edge computing and modern server caching strategies. Queries are moved to route-level data loaders that run server side rather than on React Server Components, giving more reliable performance levels.

By clearly separating server work from client components, there’s less confusion between how the two are supposed to mix together, resulting in a simpler developer experience and fewer mistakes. 

Shopify remain in close collaboration with the React core team and the RSC. However it looks like from now on the Remix data loading patterns will continue to play the key role. In Shopify’s own words: “it’s the ideal solution for the performance and resiliency of our merchants' websites”. 

Routing

The Remix router has introduced an innovative approach to nested routing, something that was crucially missed in Shopify’s previous declarative and file-based router solution. A few syntactical differences aside, the new solution follows much the same logic, with Remix adding some extra benefits on top. 

1. The “root” route offers a more intuitive way to provide a consistent layout component for your website’s shell.
2. “$” gives a catch-all route that creates dedicated places in your file structure for pages like the 404.

Error boundaries

Mistakes are a fact of life. Development is no different and no matter how skilled you are at coding, you will make mistakes. It’s great, then, when you know that any mistakes are both easy to spot and contained as much as possible.

Nested error boundaries keep everything around a mistake working as they should, and make sure that only specifically affected areas of your website are disrupted by mistakes.

You can write messages and fallback UI for individual parts of each page related to distinct fetch requests, and for whatever status code you want to throw.

Mutations

E-commerce has some key fundamental features that, if done well, make a store run smoothly and have a big impact on conversion rates. Letting shoppers pick up right where they left off, allowing them to easily share links with friends and keeping the path to purchase clear from clutter. These 3 are key moments in an effective storefront, but they’re famously difficult to get right. 

With the introduction of Remix’s useMatches, useSearchParams and useFetcher, however, it’s becoming a lot easier on Shopify’s hydrogen stores. These are each incredibly powerful ways to revalidate server data while keeping a single source of truth in your URL.

The forthcoming Hydrogen cart will move all actions to the server and therefore remove client-side JavaScript. It’ll also feature Optimistic UI to give that instantaneous feeling to all add-to-cart actions. 

With simple and flexible APIs for working with paginated Storefront API queries, the Hydrogen Pagination component makes product grids, search results and order history requests much easier to handle.

Take infinite scroll, for example, not only will it now (finally) be easy to do right, the URL will be automatically updated and store restoration will make sure you swipe back right to where you left off. And if you share a link with a friend, they’ll even land on the very same grid of products you were looking at when you stopped scrolling. How good’s that?

As a frontrunner in headless development we’re delighted to see Shopify recognise the power of headless stores and work it into their platform with in-house solutions. It’s easy to imagine another company in Shopify’s position interpreting headless development as a threat to their business and subsequently trying to discourage it. For us, it’s a further indication of Shopify’s forward-thinking approach that they’ve recognised this new trend and brought it into their stack.

The big question that we’ve faced so far is what the Hydrogen and Oxygen tools mean for headless Shopify Plus stores. The simplest way to think about it is this: Shopify stores built with Hydrogen and Oxygen are headless Shopify stores. They’re headless stores built in a different way to previous iterations.

Headless architecture certainly isn’t going anywhere, the moves by Shopify to bring React into the heart of their platform is proof that they see headless as key to the future of e-commerce. Today it is easier than ever before to build a headless Shopify store.

However, it’s also important to remember that Hydrogen and Oxygen are not replacing Shopify’s previous tech-stack. Shopify Liquid is not being phased out and remains a central facet of Shopify development. JavaScript and React are being moved up alongside Liquid to have equal footing in the Shopify ecosystem, however ‘traditional’ Shopify Liquid stores are not under threat of being made obsolete.

The Shopify 2.0 updates are testament to this. Shopify have improved their native platform to such an extent that many e-commerce brands no longer need to consider going headless. Many of the key reasons for building a headless store a few years ago have been removed by Shopify 2.0’s new capabilities.

Multilingual stores that are fast and flexible enough to scale into international markets are now possible on a native Shopify 2.0 solution, urging many to ask us the question: is headless still the way to go?

The fact is headless is still an interesting and enticing solution, but realistically only to the very (very) top e-commerce businesses. Headless Shopify stores still perform better than Shopify 2.0 stores, and for the very largest brands with the very largest stores this is a key characteristic that they can’t ignore.

Those brands now have the choice to build a headless Shopify store with in-house Shopify solutions, or to bring in their own tech-stack requirements. This makes Shopify the single most flexible platform in the industry. Whatever you want to build and whatever e-commerce goal you want to achieve, it’s all possible on Shopify.

We’re confident Shopify’s updates mark the beginning of a new era of D2C e-commerce. Customers are becoming increasingly used to the highest standard of online experience and this is only set to continue. Online merchants need to keep up. Upgrading their store to either a Shopify 2.0 store or a headless solution with Shopify Hydrogen is the best possible place to start.

Get in touch with any questions or if you want to know more!