How does Shopify Hydrogen work?
Shopify Hydrogen is a react-based framework used to build the front end of a headless ecommerce website. However, as you'd expect, it has API connections to Shopify and security built-in. If you were to opt for an alternative headless framework such as Next.JS then you'd need to build the connections to Shopify yourself! Shopify Hydrogen also has a library of pre-built components to speed up the development phase of a Hydrogen headless store whilst still offering the customizability and flexibility you'd express from headless architecture.
Shopify's Storefront API allows headless stores to connect to Shopify's powerhouse of features, giving developers ultimate control over the tech stack. Non-headless Shopify stores use a code language called Liquid which is managed on the inside of Shopify meaning that the developer of the store is limited to the capabilities of Shopify only.
What are the advantages of Shopify Hydrogen?
Hydrogen has been coined as "the future of ecommerce" so let's dive into some of the advantages that Shopify Hydrogen has to offer for brands wanting to leap into headless ecommerce and Shopify
Powered by React.JS
Ready to launch Hydrogen template
- Shopify Hydrogen offers an entire store template that is ready to launch, meaning developers do not need to spend months building the same features but instead can focus on custom store experiences.
Shopify Hyrdogen Integrations
- pre-built integrations with Shopify Hydrogen are growing such as content management systems like Contentful, as well as leading apps such as Klaviyo
Shopify Hydrogen Customizability
- the main reason that brands choose headless is the ability to have complete control over the frontend tech stack and not be limited by the platform of choice. Shopify Hydrogen is no different and allows developers to build entirely custom storefronts and integrations. There is also a community of developers working on the code to support and provide tips with the existing documentation
What are the disadvantages of Shopify Hydrogen?
A headless store with Shopify Hydrogen isn't all roses and should be carefully considered. Some of the disadvantages of Hydrogen and headless include:
- the biggest consideration about any headless e-commerce store is you will be highly reliant on developers. A headless front end is entirely separate from Shopify and the backend meaning you'll need third-party tools to manage content and onsite features. A big benefit of Shopify themes is the amazing content editing tool called Online Store 2.0 which even allows you to create new pages without developers. Any onsite changes are likely to require a developer to do them.
You'll need your own CMS
- Shopify Hydrogen is only the react framework that powers the frontend code - it does not offer a content management system that you may be used to with Shopify Themes.
Minimal App Support
- One of the great benefits of Shopify is the rich amount of apps in the app store to extend the features and functionality of your store. If you want to relish in features you'll need to rely on apps having a native integration, open API or have a developer build it for you.
How to get started on Shopify Hydrogen?
There are lots of ways to get started with Shopify Hydrogen, whether you're an experienced developer or just starting out. The official docs provide a comprehensive overview of the technology and its various features, as well as example projects and lots of helpful information on everything from runtime variables to channel bundles.
If you're looking for even more information, there are a number of great resources available online. For example, the Shopify Hydrogen GitHub repository contains lots of example projects and code snippets, while the official Shopify developer blog frequently publishes articles on new features and best practices for working with the technology.
To get started with Shopify Hydrogen, you'll need to have Node.js and Yarn installed on your machine. From there, you can use a tool like Vite to quickly create a new project, or you can start from scratch and configure everything manually.
Shopify Hydrogen VS Liquid
Shopify's templating language called Liquid
Shopify Hydrogen VS Other React Frameworks
Hydrogen uses React Server components as its base for the framework, allowing page rendering from both the browser and the server which ultimately improves site speed. The main benefit to choosing Hydrogen over another React framework such as Next.JS is the connectivity to Shopify's API which is pre-built and tested. By using Hydrogen, developers save huge amounts of time as features that are required to connect to Shopify's API for basic ecommerce features such as cart etc are ready to go. Hydrogen also comes fully equipped with a full store template pre-built to be used as a foundation and many site components or elements that can be used and prevents the need for everything to be built from scratch for a project.
Summary for Shopify Hydrogen & Oxygen
If you are looking for a headless ecommerce store with Hydrogen and Oxygen, learn more about our headless services here.