Is Shopify Hydrogen right for you?

Spoiler alert! For majority of Shopify owners and developers the answer is NO, but some of you should consider using it. With such a clumsy introduction I invite you to continue reading if you are interested in my humble reasoning.

After announcing Hydrogen at the global event Shopify Unite 2021 in the end of June 2021, Shopify recently opened a public access to this framework and its documentation.

As a front end developer who works with Shopify stores on a daily basis, I could not let this news go unnoticed. Who knows, may be this is the next big thing and tomorrow everyone will throw away liquid based themes and switch to Hydrogen. It’s better be ready for this. So I decided to give it a quick glance to figure out what it is and whether I should prepare myself for the impact or let it go.

From the technical point of view Hydrogen is a React-based framework built on top of the following components:

• React 18 (at the moment of publication it’s in alpha version that moves towards a stable release)
• Express server
• Custom express middleware
• Vite - a dev server and a building tool
• Tailwindcss - css framework

No doubt that Shopify dev team made a lot of effort to create a fast, reliable, bleeding-edge js framework that would be fun to use. Yes, FUN to use. Don’t know why Shopify CEO Tobi Lütke stressed this word during his personal Hydrogen presentation, but that’s what he said. Be prepared for fun. In his turn, Shopify developer Ilya Grigorik wrote an extensive article where he reveals in greater detail the main selling points of the new framework:

1. streaming server-side rendering for fast first render powered by React’s Suspense;
2. React Server Components for efficient, post-render component-level state updates;
3. built-in server and client data fetching primitives with smart cache defaults;
4. flexible page and subrequest cache policies to power dynamic and edge delivery;

If you allow me I will add one more option to the list:

5. tight coupling with the existing Shopify ecosystem.

Let’s go through all these options and see if there is anything worth buying.

Option 1 and 2 depend on React 18 new features that have not been officially released yet but are now available for testing as part of Hydrogen framework. Actually, if you are creating a modern React-based framework, these are more like must have features, rather then look what we have here. Without them you are out of the game. Thus this is not an exclusive offer provided by Hydrogen and there are more frameworks to come that will have the same features out of the box.

For example, the well-known and mature Next.js framework, with a huge community base, will support all React 18 features including these two options in its 12th version. Not to mention Next.js’s other cool features and performance optimizations that Hydrogen does not have.

Option 3 and 4 contain a general description of custom solutions to improve data usage over the network and some optimizations to improve user’s experience. The key role in all these optimizations is played by Oxygen, Shopify hosted V8 worker runtime that will allow to make server-side requests to Storefront API with a localhost speed.

Awesome logo! The water equation :)

This is big! No, really, this is a HUGE advantage in terms of performance. Though, technically, Oxygen is not part of Hydrogen framework and if you choose to, you may host your Hydrogen app whenever you want to: AWS, Heroku, Vercel, Netlify, Cloudflare or even on a private server, but only Oxygen gives you zero penalty for data fetching via Storefront API. At this moment it’s not clear whether only Storefront API will have no network penalties or if we can expect the same timings for the entire Shopify API suit. We will find out soon enough: the release is expected in 2022.

Option 5. This is where Hydrogen truly shines. It comes with a package of predefined components and hooks already configured to work with Storefront API and native Shopify object’s data format. That gives you a good head start and helps to reduce the time to production.

The answer

It’s time to reveal the answer to the main question of this article. But before I do so, I should warn you that the answer won’t be the same for everyone, as it depends on who you are and how do you use or plan to use Shopify. I took some liberty and divided all interested parties into several groups that might be impacted by Hydrogen.

Existing shops with classic themes

IMO Hydrogen has no interest for you. If the shop is already working and generates a revenue, don’t change anything. Switching to a custom storefront is a huge risk, it’s expensive and there is no guarantee that it will pay off. Ask yourself, do you really want to have the same features at a higher price? If the answer is positive, be prepared to:

• hire more qualified developers to create and maintain the storefront;
• handle infrastructure costs to host your new storefront;
• stop using or replace some Shopify applications that won’t be compatible with your new storefront;
• change the way you collect analytics data on your site.

This list is probably not complete, but you get the picture, right?

Existing shops with custom storefronts

I would recommend you to stay put for a while and wait for Oxygen release. Hydrogen has nothing to offer you at the moment. Everything will depend on Oxygen’s hosting plans and operational strategy selected by Shopify. If Oxygen is vendor-locked, then it is definitely worth to consider switching to Hydrogen, of course, if you can afford it from the financial point of view.

On the other hand, if Oxygen is going to host third-party applications, that will be a nice opportunity for existing React-based storefront solutions. In that case you may migrate your storefront app to React 18 and start using blazing fast data fetches with the help of React Server Components. For non-React storefronts I don’t have much to say now. If React Server Components are adopted widely by JS community, I believe that all major JS frameworks will come up with similar solutions and then you will be able to have all the benefits of Oxygen as well.

New shops

Use classic themes by default unless you have a specific requirement which is hard or impossible to implement with a classic theme. In that case Hydrogen will be a good choice.

Takeaway from this article

• Hydrogen is not a mainstream solution.
• Hydrogen will show its full performance potential only in combination with Oxygen.
• Oxygen is a big thing.
• Without Oxygen, Hydrogen is a React-based framework that helps to reduce a development phase and create custom storefronts faster.