Shopify Hydrogen vs Next.js

Shopify Hydrogen is an opinionated React-based framework for building custom headless storefronts. Back in 2022 Shopify decided to accelerate their new framework’s development by acquiring another React-based framework called Remix. The two platforms' integration was rolled out in Hydrogen’s most recent major update (version 2.0).

Now that Hydrogen has made a significant jump in functionality, it has become an legitimate competitor to Next.js.

We’re big Next.js fans and have written extensively about Next’s pros and cons. It’s our primary frontend framework for building applications and headless eCommerce stores.

However, as much as we love Next.js, Hydrogen is hard to ignore, especially when we work with eCommerce brands already running on Shopify and want to upgrade to a headless architecture. The big selling point for Hydrogen is that it comes with in-built components, utilities, and hooks tailored to provide a more streamlined Shopify development experience.

Next.js, on the other hand, is a more general framework. It’s objectively more powerful and comes packed with better rendering techniques that significantly improve the administrative user’s experience. However, it doesn’t have a neat supported library of Shopify-specific components like Hydrogen.

We wanted to compare how the two frameworks stack up for a couple of reasons. Firstly, this is what we do! We build headless eCommerce stores. We’re already researching these frameworks, so why not share the knowledge?

Secondly, unless you’re comfortable downloading and spinning up a package from Github, you’ll have difficulty getting in to play around with Hydrogen. And even if this isn’t a problem, you might not have a baseline to make assessments.

With all that said, let’s get into it.

Shopify Hydrogen overview

Before Hydrogen came along, the only option Shopify businesses had was Liquid, a Ruby-based templating language for building Shopify themes.

Liquid is pretty handy and can do some cool stuff, especially in the latest versions of Shopify. However, it’s a server-side framework which means that the front and backend and tighly coupled. This also means that sometimes you have to do things “the Shopify way” instead of the way you might want to.

There are many use cases where typical monolithic restrictions prevent an online retailer from doing what they want to, or restrict them from taking the next big step. We’ve even detailed a dozen of these scenarios and how a headless architecture solves these problems.

Hydrogen was created to address these problems by providing a headless alternative to Liquid. From Shopify’s perspective, it’s a win because they keep their customers and can even upsell them onto Oxygen, the Hydrogen hosting platform. From a customer perspective, it’s a win because you don’t have to migrate off Shopify to get access to the modern tools that much bigger companies have used to their advantage over the past few years.

Hydrogen features

Here are some of Hydrogen’s main features and benefits:

Custom Shopify components, hooks, and utilities

Hydrogen provides a set of performant React components, reusable functions, and utilities tailored for interacting with the Storefront API.

These components include functionalities like:

• Cart
• Shop Pay
• Analytics, which help simplify business logic, data processing, and state management.
  

Access to these components eliminates the need for your team to build these features from scratch. Anything that reduces the complexity and boilerplate code typically associated with e-commerce development is good!

Vite

Hydrogen utilizes Vite as its build tool, which is based on Go. Vite is a fast and lightweight tool that offers features such as hot module replacement (HMR), code splitting, tree shaking, and efficient bundling using ESbuild. Vite seamlessly supports TypeScript, JSX, CSS modules, and other web development technologies out of the box.

By integrating Vite as its build tool, Shopify Hydrogen provides faster build times, improved loading speeds, and an overall more efficient development workflow. It ensures compatibility with popular web development technologies, making it a big tick in most developers' books.

Tailwind CSS Integration

Hydrogen comes with Tailwind CSS as its default styling solution. Tailwind CSS is a utility-first CSS framework that eliminates the need for writing custom CSS code. It provides a responsive grid system, a comprehensive set of utility classes, and a plugin system for extending functionality.

Tailwind is our framework of choice for a couple of years now, and we’ve written extensively on how it’s improved our development velocity and streamlined our processes.

Hydrogen’s Tailwind CSS integration lets you quickly create custom designs and styles for your storefronts without the overhead of managing large CSS files.

Streaming SSR and React server components

Streaming SSR is a powerful technique employed by Hydrogen that allows the browser to begin rendering the page before the server has completed sending all the data. This means that users can start seeing and interacting with the content even before the entire page has finished loading. The result is a faster initial render, reduced perceived latency, and an enhanced sense of responsiveness for the user.

In addition to streaming SSR, Hydrogen leverages React server components to further optimize performance. With React server components, the server can send only the necessary data for each component rather than sending the entire component code and data.

This targeted data delivery reduces the amount of code and data sent over the network, resulting in faster page loads and improved performance. By minimizing network overhead and focusing on essential data, Hydrogen helps storefronts operate efficiently and responsively.

Oxygen hosting platform

Shopify’s Oxygen is a serverless platform that automatically scales to handle any amount of traffic and offers features such as edge caching, CDN delivery, security, and analytics.  It’s designed specifically to host headless Hydrogen Shopify storefronts.

We’re still in the process of assessing Oxygen. It’s a little tricky to get a hold of because Shopify doesn’t expose a sandbox environment. To trial Oxygen, you either need to speak directly with a Shopify rep or have a Shopify Plus account where you can spin up a dedicated store for testing it out.

Watch this space. We’ll release an in-depth review of Oxygen over the next week or two.

Tailored for Shopify's ecosystem

Hydrogen is built explicitly for developing custom headless Shopify storefronts, providing seamless integration with Shopify's features, components, and Storefront API. It’s pretty straightforward to call data from the Shopify API onto the storefront using hooks like `useShopQuery`, which is fantastic if you’ve tried to do this through a different framework.

Besides the API integration tooling, the next biggest benefit is the Shopify team is maintaining the components in the Hydrogen UI library. If there’s a cart component bug preventing it from talking to the Shopify API, your team don’t necessarily need to spend the time fixing it (unless it was your fault!).

There’s no other headless solution on the market where part of you can push problems up the chain for someone else to fix, which is kind of neat.

Pros and Cons of Shopify Hydrogen

Here’s my take on the pros and cons of Shopify Hydrogen. The features I’ve listed above overlap pretty heavily in the “pros” list, so I’ve gone short and sweet with this summary.

Pros

• Hydrogen UI cuts down on development time and provides access to components that have been specifically designed for integration with Shopify’s API.
• No need to migrate your products, history, or users from Shopify if you’re already using the platform.
• Your environment is managed from the same place the rest of your tools are, and it integrates nicely with the rest of the Shopify analytics suite
• Native Tailwind integration so you can jump straight into building your new storefront
• Vite is actually a really great build tool
• Comes with enough rendering techniques to build a performant and flexible store
  

Cons

• You’re locked into Shopify, and turning your store into a fully composable build is harder if you want to swap out parts of Shopify’s solution
• Hydrogen isn’t as mature as Next.js, and doesn’t provide the same range of rendering techniques, which is actually a pretty big deal.
• Doesn’t support incremental static regeneration, which means your team will have to wait for the build to finish every time a change is published. This can mean 5, 10, 20 or even 30 minutes of waiting, depending on how large your catalogue is.
• There’s a smaller community to reach out to if you get stuck and need support compared with Next.js
• The documentation isn’t great, which is a strong sign that it’s an immature framework.

Next.js overview

Next.js is an open-source JavaScript framework that enables developers to build server-rendered React applications easily. It was created by Vercel, and has gained popularity for its developer experience and performance optimization capabilities.

I’ve mentioned a few times that our team love Next.js. Over the years, we’ve used straight React, Gatsby, Vue, Nuxt, and a bunch of other less popular frameworks. We’ve thrown all our chips behind Next.js because it does a better job than anything else on the market.

I won’t go into the benefits and disadvantages of Next.js in this article because we’ve written pretty extensively on that topic. It’s one of our most popular articles, so please jump in and check it out by clicking that last link if you’re interested.

Next.js Features

Here are the Next’s features that are worth paying attention to.

Page-based routing system

Next.js offers a page-based routing system, where each page is treated as a separate entity. This approach simplifies the organization and navigation of the application by mapping URLs directly to corresponding files in the project structure. With Next.js, developers can easily create dynamic and static pages, define custom routes, and handle client-side and server-side rendering.

Server-Side Rendering (SSR) and Static Site Generation (SSG)

Next.js excels in server-side rendering, allowing you to pre-render pages on the server and send fully rendered HTML to the client. This approach improves performance, SEO, and user experience by delivering content faster. It also supports static site generation, where pages can be pre-built at build time and served as static files, reducing the need for server-side rendering on every request.

Server-side rendering (SSR) and static site generation (SSG) capabilities are particularly advantageous for building a headless commerce store. SSR allows Next.js to fetch and render product data on the server, delivering fully rendered HTML pages to the client. This approach improves performance, SEO, and user experience by reducing the time required for the initial page load. The SSG feature enables the pre-generation of static pages at build time, which can be beneficial for showcasing product listings, product details, and other static content.

React framework integration

Next.js seamlessly integrates with React (since it’s a framework built on top of the React library), providing a cohesive development experience for building web applications.

It provides built-in support for React features like JSX, component-based architecture, and state management. JSX (JavaScript XML) allows developers to write HTML-like code within JavaScript, making creating and manipulating components easier.

The component-based architecture enables you to build your application as a collection of reusable and composable components. You can create functional or class-based components that encapsulate specific functionalities and render them in a tree-like structure. This modular approach promotes code reusability, maintainability, and scalability.

In terms of state management, Next.js provides built-in support for React's useState and useEffect hooks, which enable developers to manage component state and handle side effects. Additionally, Next.js is compatible with popular state management libraries like Redux, MobX, and Zustand, allowing developers to choose the solution that best fits their application's needs.

Module Replacement (HMR)

Next.js provides a fast refresh feature that enables instant updates to the code during development, making the development experience highly efficient. With fast refresh, any changes made to the code are instantly reflected in the application without the need for a full page reload.

This rapid update process enhances productivity by providing immediate feedback and reducing the waiting time between code modifications and seeing the results. Developers can iterate quickly, making adjustments and fine-tuning the application's behavior and appearance in real-time.

Hot Module Replacement (HMR) allows you to see changes reflected in the browser without the need to manually refresh the page. When a file is modified, HMR updates only the necessary components or modules, preserving the application's state and avoiding a full reload. This functionality enables a seamless development experience, as developers can instantly see the impact of their code changes, evaluate the results, and make further adjustments if needed. HMR improves development efficiency and reduces the time spent waiting for the application to reload after every code modification.

SWC compiler

Next.js leverages the SWC (Super-fast WebAssembly-based Compiler) to enhance build times and optimize JavaScript code. The SWC compiler provides faster transpilation, reducing development and build times. This optimization contributes to a more efficient development workflow, enabling developers to iterate quickly and deploy changes with minimal delay.

Which one to pick? Shopify Hydrogen or Next.js

Hydrogen, designed explicitly for Shopify eCommerce developers, offers a highly specialized development experience. It provides a comprehensive set of custom components, hooks, and utilities specifically tailored to integrate seamlessly with the Shopify ecosystem. These pre-built tools are designed to handle standard eCommerce functionalities, such as cart management, Shop Pay integration, and Shopify Analytics.

It saves your development team time and effort often spent implementing core eCommerce features and writing a bunch of fairly “standard” code from scratch, accelerating the development process.

On the other hand, Next.js is a general-purpose React framework that caters to a wide range of web development needs beyond e-commerce. It doesn't come with Shopify-specific features out of the box.

In my opinion, the big drawcard for Shopify’s solution is Hydrogen UI. The thing is that it’s possible to use Hydrogen UI with Next.js. The only real downside of doing this is that as soon as you make changes to the components (to get them working with Next), they will be out of sync with the package, and you might run into issues if you try to update the UI library.

Generally speaking, Hydrogen is an okay developer experience. The Vite configuration is pretty complicated and doesn’t feel smooth yet. There seem to be differences in the development and production environments which can cause some frustrating bug fixing, and it takes more time to do the stuff that’s straightforward in Next.js.

At a guess, if Hydrogen remains on its current trajectory and it’s paired with Oxygen, it might be a decent developer experience in a year or two.

Next makes life a bit easier right now. It’s got a much larger ecosystem of supported services, packages and libraries. Its documentation is excellent. Vercel’s hosting solution is elegant. It’s honestly hard to fault.

Frequently asked questions

Q: Can I use Shopify Hydrogen for non-Shopify projects?

No, Shopify Hydrogen is designed to develop custom headless Shopify storefronts and is tightly integrated with Shopify's ecosystem. If you are not working on a Shopify project, Next.js would be a more suitable choice.

Q: Which framework offers a better developer experience, Hydrogen or Next.js?

Next.js, hands down. Even though the two frameworks are based on React and share many similarities, Next is a more popular solution that has already ironed out a lot of the kinks Hydrogen is still struggling with.

Q: Does Next.js offer any pre-built components for e-commerce functionalities?

Next.js itself does not provide built-in components tailored explicitly for e-commerce functionalities. However, it offers Next.js Commerce which is a starter kit designed for building high-performance e-commerce websites. Next.js Commerce offers support for multiple backends, including integration with Shopify.

Wrapping up

Both Shopify Hydrogen and Next.js are powerful frameworks for building web applications, but they cater to different needs and scenarios. Shopify Hydrogen offers a tailored development experience designed explicitly for Shopify eCommerce developers, with pre-built components and utilities that seamlessly integrate with the Shopify ecosystem. On the other hand, Next.js is a versatile React framework suitable for a wide range of projects, providing flexibility and extensive ecosystem support.

Ultimately, the choice between Shopify Hydrogen and Next.js depends on your specific project requirements, familiarity with Shopify, and preference for either a tailored Shopify-centric experience or a more flexible general-purpose framework.