Shopify Hydrogen

Hydrogen

At first sight it may look like just another React framework, something like the very popular Next JS, except it is built specifically for ecommerce and for Shopify and it uses some quite experimental features (which especially concerns its approach to SSR). Let’s look at what it offers.

Key concepts

It is meant to be fast for both developers and users. It uses Vite as a building tool. Out-of-the-box it offers you a lot of components, hooks and utilities that are prepared to work with Shopify through its Storefront API. Components are styled with Tailwind CSS but you can decide to use other styling options instead.

You can play with it here.

It is worth noting that for now Shopify Hydrogen is just a developer preview. It is not fully completed (for example, search and customer accounts are not implemented) but you can already check it out and even start building on it. Also, Shopify announced the release of Oxygen. It is going to be a global hosting solution for Hydrogen storefronts and “the fastest way to deploy Shopify-backed commerce experiences”.

Streaming SSR and React Server Components

One of the most important things about Hydrogen is that it uses brand-new React features. Firstly, a new React 18 alpha streaming SSR API powered by Suspense Server. It allows fast TTFB (the browser streams the HTML page shell without blocking the server-side data fetch) and progressive hydration. Secondly, React Server Components, an experimental React feature that was introduced at the end of 2020 but is still considered to be in development. Hydrogen is taking the risk to use it before anyone else. The idea is to divide components into client-side ones (.client.js file extension) and server-side (.server.js) ones. This way you can easily reduce your bundle size. Server components are not included in the bundle. They are never downloaded by the browser, having zero effect on the bundle size.

I guess we will soon see how Hydrogen develops, however I must say it looks very promising and I am quite impressed with Shopify’s ideas for developing an ecommerce frontend. No matter if you are looking for a more “classic” lean solution with JS just sprinkled here or there or a modern PWA based on React - you are going to have some great options with Shopify.