Hello, Hydrogen: Shopify's New React-Based Framework

One of Shopify’s biggest announcements at Shopify Unite was Hydrogen, a React-based framework and the eCommerce giant’s recommended approach to building super fast, dynamic eCommerce stores.

Just a few days ago, Shopify shared that Hydrogen is now available in developer preview. By combining Shopify's sophisticated commerce-optimized components with a quickstart environment, Hydrogen makes it easier than ever before to create custom storefronts. It enables Shopify developers to create "headless" stores, in which the customer-facing frontend resides apart from the data-processing backend.

Hydrogen will help Shopify developers provide much more dynamic shopping experiences to their customers by using React, a JavaScript library (collection of prewritten code) used to construct interactive user interfaces. Creating interactive user interfaces is a breeze using React. When your data changes, React will instantly update and render the correct components when you use simple views for each state of your application.

What is Hydrogen?

Shopify’s Hydrogen is a React-based framework that provides pre-built components for creating a custom storefront.

This means that developers and their clients will not be restricted to pre-designed templates for their store's design. They’ll be able to easily create an entirely new online shopping experience from the start. Hydrogen integrates one’s storefront to Shopify through webhooks, allowing one to make use of Shopify's intuitive eCommerce features while keeping total control over the frontend user experience.

Typically, you would exit the browser, install Node.js, Git, and a code editor, and then initialize the project. However, with the advent of WebContainers earlier this year, this is no longer necessary.

What is Oxygen?

Shopify also announced Oxygen, a global cloud server infrastructure, to assist merchants in hosting and deploying Hydrogen-based apps. It will assist you in hosting custom storefronts, collaborating with design teams via GitHub, and even deploying Shopify Hydrogen applications to a live shop using your own workflow.

No matter where your consumers are, Shopify's new cloud architecture will ensure that your shop always loads quickly by hosting your Hydrogen app code alongside its Storefront API.

What if you wish to host it yourself? In that case, Shopify will package your Hydrogen application as a Dockerfile so you may host it yourself. You'll have everything you need to design and implement your store's online buying experience.

Benefits of Hydrogen

Whether you're building up a new Shopify merchant's storefront or creating a customer experience for visitors, Hydrogen's purpose is to reduce repetitive and nasty technical plumbing, helping you to get started quickly and focus on providing merchant value.

For instance, here are a few important components that Hydrogen resolves:

Suspense's streamed server-side rendering enables a quick first render;
React Server Components for efficient, post-render state changes at the component level;
Efficient server and client data fetching primitives with smart cache defaults;
Flexible caching controls for pages and subrequests for dynamic and edge delivery.

Go from designing to building right away

Skip setup and go straight from designing to building. Hydrogen includes a starter template that walks you through the process of creating custom Shopify shops. The starter template works seamlessly with Shopify stores and promptly delivers a full purchasing journey. Developers can now build betterhot reloading, built-in ESM, and a development environment powered by Vite, Typescript, and Tailwind CSS. If you have a project already integrated with a Shopify store, you can skip setup and get to coding right away.

Gain more design freedom

Shopify opts to go “headless”, providing develoeprs greater creative freedom, allowing them to experiment with layout and content modifications.

The "head" of your website and the "body" of your website are separated by hydrogen while the "body" of your website contains all the data and functions.

Oxygen's streamlined process makes it easy to develop a new frontend and then deploy it live as a Shopify Hydrogen app. You don't have to worry about disrupting your store after a revamp because the front and back ends of your website communicate via Hooks and APIs.

Optimize performance

Hydrogen's flexible, built-in cache settings provide non-blocking data fetching, delivering a fast shopping experience. Its architecture enables optimum speed by combining static and dynamic data fetching between the client and server.

It is developed on top of the more latest web technologies and uses a contemporary approach to web development to provide the following features:

Built-in caching controls to handle dynamic content and minimize API calls for speed and performance.
To optimize the initial load, server-side rendering is used.
React Server Components, an opinionated data-fetching and rendering flow for React apps. React Server Components improve development. Components render immediately, letting you see your work as you build it.

Hydrogen streamlines the development process by providing ready-to-use components, hooks, and utilities built on top of Shopify's data models. These components link directly with the Storefront API for fast data retrieval, eliminating the need to create GraphQL queries to communicate with Shopify APIs or other third-party data sources.

Build unique experiences faster

Hydrogen speeds development by using Shopify's core technology platform and experience in commerce. It integrates directly with the Shopify Storefront API to ensure data retrieval is as efficient as possible.

Hydrogen contains React components, hooks, and commerce utilities optimized for Shopify. They are easily accessible, fast, and ready to use. Additionally, they contribute to the reduction of the initial complexity and boilerplate required for developing a custom storefront.

How does Hydrogen work?

Hydrogen is the method through which you build a custom storefront. It contains a Vite plugin that enables server-side rendering (SSR) and middleware for hydration, as well as code modifications for server and client components. The SSR and hydration middleware are comparable to previously implemented Vite SSR.

If you've worked with React before, you’ll be right at home. It keeps the majority of the typical React folder structure, including a public directory for static assets and a src (source) directory for application code. Within the source directory, it also includes Shopify liquid templates for pages, blogs, collections, and products.

Shopify provides a React Provider named ShopifyServerProvider, which is setup to utilize tokens and connect to their Storefront API. As a result, you won't have to bother about manually setting Hydrogen to operate with Shopify.

While Shopify makes it relatively simple to create and manage an ecommerce website, creating one from scratch is still quite complex. It's because online stores deal with dynamic content including product and customer data, currency conversions and other languages.

Until recently, this dynamic content made using React for ecommerce systems tricky. React developers use client-side rendering to load pages to maintain the dynamism necessary for ecommerce. However, this strategy frequently impairs website performance, particularly on sluggish mobile devices.

Pre-rendering pages on the server and providing static pages to client devices, on the other hand, compromises the dynamism required to run an online business.

Pre-rendering pages on the server and providing static pages to client devices, on the other hand, compromises the dynamism required to run an online business. So, if you want to utilize React to develop an ecommerce website, you'll need to do a lot of optimization to guarantee that client-side rendering doesn't negatively impact store performance.

However, the good news is that Shopify Hydrogen eliminates the need for substantial optimizations and performance issues. Shopify is utilizing a new style of writing React components called React Server Components (RSC), which identifies critical components in Hydrogen's source folder with the suffixes.server and.client.

Conclusion

We developers are naturally obsessed with the user experience, and we work relentlessly to reduce input latency, enhance rendering speed, and eliminate jank. When pushed to their limitations, static, edge-delivered, and HTML-first webpages appear to be the best alternative. Until you discover that the next step in improving conversion rates and business objectives demands significant storefront customization.

Over the following months, Shopify will leverage the feedback from its test run to polish the new toolbox. Beginning on Monday, developers will really get a feel of how it works and be able to put up a temporary shop using Hydrogen and tinker with demo data.

Shopify believes that one of the greatest benefits of the new framework is that it will be housed on the server-side to improve the performance of apps.

For online shops, hydrogen opens up a whole new universe of possibilities. It provides endless design opportunities, faster loading shops, and the flexibility to customise shopping experiences. Hydrogen is a significant step towards securing Shopify's online infrastructure for the future, but it won't take the place of Liquid any time soon.

Want to give it a shot? Developer preview is online at shopify.dev/custom-storefronts/hydrogen. Take it for a spin, let us know what you think!

For now, most of what Hydrogen has to offer can be accomplished using Shopify's current technology especially with the right team. Get in touch with Webinopoly's Shopify Experts for any of your Shopify requirements, from building a custom website to designing your store with Shopify and React!

Webinopoly is a multi-award-winning digital agency specializing in design, setup, development, and marketing.

Connect with us

If you need a Shopify website built, a Shopify app developed, or any eCommerce solutions developed, please contact us at 713-805-5888, email us at [email protected], or leave us a message here.

Learn more about Webinopoly

If you’d like to learn more about what we can do or view our portfolio, please click on the links below: