Shopify Hydrogen: Everything To Know About This Headless Commerce Framework

The Story of Hydrogen

Shopify Hydrogen starts with an empty GitHub repository called Shopify/hydrogen, created on April 1, 2021. It was designed to do what Shopify Liquid can’t.

Liquid has long been the backbone of countless storefronts, yet, for all its strengths, Liquid presents a host of challenges and limitations that can stifle innovation and flexibility, including:

• Vendor lock-in: Liquid theme binds your code to Shopify so if you want to migrate to a different system, good luck. This rigidity costs brands not just in terms of potential growth but in hard dollars—rebuilding on a new platform can consume thousands of hours and hundreds of thousands of dollars.

• Customization: Liquid is a template language, designed primarily for static content generation, and falls short when it comes to building dynamic, responsive user experiences expected by today’s online shoppers. Developers find themselves bogged down by the limited customization options that Liquid allows, often leading to additional app scripts, which often conflict with theme code, resulting in even more redundant and non-reusable code. Any developer with a DRY mindset (don’t repeat yourself) would hate it!

The most fundamental drawback is that Liquid is a template language - making it challenging to develop custom storefronts. Custom databases and complex logic are tough nuts to crack. I remember reading this on Shopify Reddit - which perfectly captures the biggest drawback of Liquid:

Liquid theme restricts you to how and what you can develop. Do you want to create a single-page application? No. Perhaps a progressive web application? No. Is it possible to unit-test your markup? Again, no! Even custom URLs are not an option.

This is where Hydrogen comes in. As the engineering team at Shopify put it:

We built Hydrogen to solve a problem merchants—especially larger merchants—were facing: How do I use Shopify’s storefront API to build a custom storefront without losing everything I get for free with a Liquid storefront?

At its core, Hydrogen is built on the powerful React framework, enabling dynamic, app-like experiences that are fast and responsive right out of the box. This new approach aims to equip merchants, especially those with larger, more complex operations, with the tools to build custom storefronts without losing the foundational benefits that come with traditional Shopify setups.

Atoms is one of the first Shopify brands to go headless with Hydrogen

Hydrogen addresses the weaknesses of Liquid by leveraging the flexibility of React components to allow for truly bespoke e-commerce experiences. It’s designed to handle everything from the presentation layer to integrating with complex backends, providing a cohesive solution that supports rapid development, testing, and scaling. The framework makes it easier to build custom storefronts by providing built-in components for cart and product management, along with advanced features like server-side rendering and automated performance optimization.

Hydrogen's Core Features

Performance-First Design

One of the biggest selling points of Shopify Hydrogen is its blazing-fast performance. Thanks to server-side rendering and React Server Components, your online store loads super quickly, giving visitors a smooth, lag-free experience. Fast load times aren't just about user satisfaction; they're also key for SEO. Google loves speedy sites and good user experience. According to former Head of SEO at Shopify, Kevin Indig, Google uses clicks and site interaction for ranking.

Clicks here would include CTR, pogo-sticking (users quickly pogo-stick back and forth between search results), and long clicks (users stay on the page for a long time without going back to search results). This finding further reinforces a long-standing SEO best practice is that we should also optimize for engagement, user experience, and site design because these factors would also influence ranking. (See the study)

Developer-Centric Tools

Hydrogen is like a Swiss Army knife for developers. It’s packed with all sorts of tools that make building and managing an online store straightforward. From automatic code splitting to efficient state management, Hydrogen is designed to make developers' lives easier as comes with out-of-the-box features for testing, observing, debugging, and deployment, which also means less time tinkering and more time making your site great.

Optimistic UI Updates

Hydrogen incorporates an Optimistic UI pattern, which allows the interface to update instantaneously before server responses are received. This means actions like adding items to the cart feel immediate from a user’s perspective, enhancing the overall shopping experience without waiting for server-side confirmation.

Nested Routing

Shopify Hydrogen also supports nested routing, enabling smoother transitions between pages. This is crucial for e-commerce where shoppers often jump between product listings and detail pages. By only reloading parts of the page that need updating, Hydrogen keeps the user experience fast and fluid.

Edge Rendering

Hydrogen utilizes edge rendering technology to deliver content closer to the user's location, drastically reducing load times and improving site performance globally. This feature is particularly beneficial for international e-commerce stores that cater to a global audience.

Built-in SEO Enhancements

With Hydrogen, SEO is a priority, not an afterthought. It’s designed to ensure that sites built with it are inherently SEO-friendly, from faster load times through server-side rendering to structured data automatically embedded into pages to enhance search engine visibility.

Flexible Caching Strategies

Hydrogen offers powerful caching capabilities that can be customized based on the specific needs of your store. Whether it’s full-page caching for static content or sophisticated invalidation strategies for dynamic data, Hydrogen provides the tools to optimize cache behavior for maximum performance.

Building with Hydrogen

Setting up and developing storefronts with Shopify Hydrogen is designed to be straightforward but powerful. First, you need to understand the 03 pillars of a Hydrogen stack.

From this understanding, you’d need to begin with environment setup—Hydrogen requires Node.js (version 16.14.0 or higher) and supports npm, yarn, or pnpm for package management. Installation is as simple as running npm create @shopify/hydrogen@latest, which sets up the initial project structure (GitHub).

Of course, I’m not trying to reinvent the wheel here. The full tutorial can be found at Shopify Hydrogen docs. Also, check out this tutorial for a quick overview.

Shopify Hydrogen vs NextJS

Shopify Hydrogen is not designed to compete with NextJS, as Bret Little - Shopify’s Staff Software Engineer put it:

You can use it with Next.js, we have a lot of merchants that are very successful with Next.js. You can use it with Gatsby, you could use it with Vue, you could use it with whatever you want. Hydrogen isn't trying to take away from those options of whatever else you might, if your team really knows Vue really well, why would we say don't use Vue to build an e-commerce site? You can build a very good e-commerce site using a variety of technologies. The whole point of Hydrogen is it's an opinionated way of building commerce on top of the storefront API - very opinionated because you want it to be easy and quick for somebody who maybe doesn't have a huge amount of front-end experience, but they just want to get something going, quick and as fast as possible.

My advice is that if you’re already on Shopify, use Hydrogen to get the best out of the Shopify ecosystem. However, if you’re considering moving to Shopify, and are on the fence about Shopify Hydrogen and NextJS, here’s a quick comparison.

• Shopify Hydrogen:

  • Built just for Shopify stores. If your shop runs on Shopify and you're thinking about going headless, this is tailored for you.

  • Offers built-in components, utilities, and hooks that streamline development by directly interacting with Shopify's Storefront API - which can significantly reduce the development time, as you don’t need to reinvent the wheel for basic eCommerce functionalities like shopping cart management or analytics.

• Next.js:

  • A general-purpose React framework that’s great for all sorts of web projects, not just eCommerce.

  • More freedom for developers to integrate with any backend or third-party services since it’s not tailored to any specific platform like Shopify.

  • Offers a broader application scope with more mature features. Excel in advanced rendering options like Server-Side Rendering (SSR) and Static Site Generation (SSG), which can significantly improve performance.

  • Has a massive community comprehensive documentation, and community support making it a reliable choice for developers seeking flexibility and extensive features.

If you want to read a more detailed comparison, check out this blog post from Clean Commit.

Shopify Hydrogen Limitations

Shopify Hydrogen, despite making great progress in recent months, still has its limitations.

• Accessibility: Hydrogen is nowhere as accessible as Shopify Liquid. Even with Hydrogen, implementing a headless architecture is still resource-extensive and expensive. You need a deep pocket. You need engineering power as almost everything needs to be built and maintained by developers, making it harder for the marketing team to create or edit content on the front-end layer.

• No Live Store Preview: At the moment, Hydrogen doesn’t offer a built-in real-time preview of the store you’re building, making it more challenging to implement and collaborate with non-developers (i.e.: Marketing/Sales team who frequently needs to make changes to the website).

• High learning curve: Many Shopify merchants rely on Liquid themes, which cater to a less technical audience. The leap of complexity between templating via liquid and writing typescript/GraphQl/remix might be too large for most Liquid developers.

• React Server Components: Hydrogen doesn’t produce a static progressive web app (PWA), instead, it operates through Shopify’s server using React Server Components. While this technology is innovative, it has not yet reached widespread adoption among developers.

This is where Weaverse comes into play.

We asked ourselves the big question: What if building a headless store becomes easier and cheaper? What if having a performant, pixel-perfect storefront is just as easy as making a new website from a free theme? What if we have an Online Store 2.0, but for Hydrogen instead?

And we built it. Weaverse brings you a visual editor on top of Hydrogen:

• Developers have a launchpad to build Hydrogen storefronts a lot faster, using premade themes and Weaverse SDKs.

• Non-developer, non-technical users can easily add or edit the content on their Hydrogen storefronts, without waiting for the developer’s rescue.

Take Weaverse for a spin, and see how you like it: studio.weaverse.io