Black Friday & Cyber Monday
Your ultimate guide to crushing high-volume sales periods
Hydrogen 2.0
Seb Harris
Shopify continue their impressive run of form with additions and updates by remixing their new React framework, Hydrogen. Here we'll take a look at what we know so far from the launch of Shopify Hydrogen 2.0.
Amongst the many updates at Shopify Editions Winter ‘23, Shopify announced the launch of Hydrogen 2.0. The update is set to improve the growing technology, providing improved experiences on both the customer and developer side.
The big news is that Shopify Hydrogen 2.0 sees the rollout of the open source framework, Remix, bought by Shopify back in October 2022.
Since launching the React-based Hydrogen framework, Shopify duly ran tests and research on the technology, looking for ways to improve and optimise. After a lot of feedback and deliberation, the platform decided that Remix was the best way forward for expanding Hydrogen.
The Remix acquisition is Shopify’s boldest move yet to fortify Hydrogen as the new branch of the business, and now we’re about to see its full potential unleashed on the ecommerce industry as developers build headless stores directly on the Shopify platform.
Let’s take a look at the details.
Remix is a full stack web framework that’s all about one thing: improving online user experiences.
The best way to do this? Reduce load times. Remix is a server side framework that uses “nested routes” to load data in parallel and deliver HTML documents almost instantaneously.
And in plain English? When you load a website page, there are numerous different steps to go through. Most web apps will approach these steps one-by-one, subsequently loading the site in stages as each step is completed.
Remix, however, tackles the steps simultaneously, delivering the page in its entirety in a much shorter time period.
Interestingly, Remix is widely considered to be the biggest competitor to Next.JS. Whilst Next undoubtedly remains King of the Hill in the server-side React framework arena, Remix is seen as the most capable of all its competitors.
And now with major baking from such a company as Shopify, there’s hot gossip in forums and discords throughout the industry. Everyone is keeping a close eye on where this story goes next: will Next.JS face its first serious challenge for the place at the top of the tree? We’ll keep you updated as we learn more.
At the time of the takeover, Dion Almaer, Shopify’s VP of engineering, had this to say:
“Remix will tackle challenges that developers building on Hydrogen have encountered around data loading, routing, and error handling … Shopify will use Remix across many projects where it makes sense, and you can expect to see more of our developer platform with first-class Remix support over time.”
What does it mean? That there have been a few teething problems for the Hydrogen framework. And quite understandably so. Hydrogen has introduced a new language into the core of Shopify’s platform for the very first time. It’s quite the shift, and was always going to take some time to perfect.
With Remix now integrated into the Hydrogen stack, Shopify hope to see an easier, more enjoyable experience for React developers, ultimately leading to faster, higher performance websites.
What’s more, from the tweets and official statements, Shopify clearly believe in Remix. They’ve invested huge efforts into integrating React with the Shopify platform, and they see potential in Remix as a leading framework.
After announcing the takeover, Remix CEO, Michael Jackson (not that one) had this to say:
"Shopify…will use Remix across many projects, and you can expect to see more of Shopify’s developer platform include first-class support for Remix over time.”
So whilst Shopify intends to use Remix to bolster its own technology, it will also support the Remix team to grow and improve the framework.
Alongside the Remix-optimised data loading components, Hydrogen 2.0 provides a brand new Storefront API client for simpler querying, a set of new starter templates for building Hydrogen stores, and an upgraded CLI that will get developers building faster.
Overall, the update aims to bring improved site performance to Hydrogen builds, continuing Shopify’s push to finesse the ecommerce industry and improve experiences right around the web.
Having already launched a project on Hydrogen 1.0, we’re busy working with the updated version. We’re in close contact with Shopify’s Hydrogen team, giving our feedback on the technology and getting invaluable advice in return. Watch this space for our first Hydrogen 2.0 project coming soon!
*It seems strange to describe something that's only been around for a few years as 'traditional', but you get what we mean.
What's the difference between a 'traditional'* headless build and a Shopify Hydrogen build?
Shopify Hydrogen is not (yet) a full replacement for a more 'traditional' headless project. There are some limitations that currently prevent the largest companies from considering a Hydrogen build. However, we'd be surprised if this stays the case for long.
In our eyes, the most important consideration when deciding to go headless or Shopify Hydrogen concerns the hosting:
With Shopify Oxygen, it's only possible to host one Hydrogen build per store. Shopify Oxygen is the counterpart to Hydrogen. It's Shopify's in-built hosting platform for React-based Hydrogen builds, however it's limited to one store.
This is a problem for the very largest companies because they usually require multiple portals that share a common database - most commonly for a wholesale site, for instance.
If building on Hydrogen, merchants would be forced into building multiple instances of their store, subsequently multiplying their workload and reversing one of the key reasons to go headless in the first place.
We know that Shopify have turned their attention to attracting the world's very largest ecommerce companies to their platform. Which is why we do not expect this limitation to last long. Shopify will want the behemoth businesses using their new flagship technology, and will therefore need to find a way to make it as accommodating as possible.
Watch this space for developments, and as always we'll keep you updated as soon as we hear more.
Do you want to
stay updated?
Yes
Stay ahead
Subscribe to our newsletter for a roundup of the latest in ecommerce, straight to your inbox.