[SHOPIFY] How does HYDROGEN work?

The problem that E -commerce brands face often is that the services that can be provided by modern commerce platforms are limited.

I want to create a customized store front along my brand vision. In addition, consumers' expectations for brands are higher than ever.

Consumers want a brand experience of multiple channels, hoping that it is linked to the brand identity.

In order to provide this, it is necessary to provide an experience beyond what is possible with standard themes and custom themes.

From the perspective of engineers and designers, we don't want the product page to look the same as all other pages. We are looking for design flexibility.

SHOPIFY is particularly focusing on headless commerce, especially to provide Hydrogen to the E -commerce brand that wants to provide a particularly rich customer experience, to expand the ability to expand beyond the conventional front end. It offers.

If you are considering headless of the SHOPIFY store, Hydrogen may have risen as an option.

What is HYDROGEN? Is it helpful to achieve the benefits gained by promoting headlessness?

On the other hand, as an engineer, I would like to focus on how Hydrogen provides development efficiency and flexibility.

SHOPIFY HYDROGEN, announced at Unite in 2021, is a tool set for developers to build a more personalized, high -performance Custom SHOPIFY store front desk with a REACT -based framework.

The purpose of this headless framework is to help build a special SHOPIFY Custom Front End Staul Front faster through the development team.

Shopify proposes Hydrogen as a framework solution to build a "flexible but flexible" headless commerce site.

Basically, this is a very early V3 of SHOPIFY's theme frustration, the future of the custom SHOPIFY store front.

Until now, e -commerce developers had to make choices from various compromises with each compromise to achieve their creative vision.

Until now, we needed to choose the speed of the site, how much dynamic and rich your experience could be.

HYDROGEN combines a variety of technologies to build a dynamic shopping experience without compromising performance.

There are development environments that can be started quickly, smart caching, components, and built -in cash default.

Hydrogen aims to provide the speed you want and the creativity you want.

The existing SHOPIFY store can be started by adding HYDROGEN as a sales channel from the dashboard and connecting a GitHub account.

Oxygen is a hosting solution for Shopify's Hydrogen Store Front.

Oxygen, whose hosting server is distributed all over the world, achieves the loading speed that the brand expects for headless comes.

Oxygen was built to handle a large amount of traffic and support flash sale and hit social campaigns.

Even for large brands, the site may crash with a large amount of access, so the goal of Oxygen is to maintain an excellent site performance.

It is also very easy to add Oxygen in the HYDROGEN sales channel on the Shopify dashboard.

Like other headless solutions, Hydrogen uses a REACT framework to create a very high performance and infinite customizable online strip.

According to Shopify, they built Hydrogen because Jamstack framework was not the best platform. If you migrate to Hydrogen React Shopify Store Front from a conventional Liquid -based SHOPIFY theme, the front end of the e -commerce store will only be connected to the back end via API.

HYDROGEN has components and hooks built in advance to map directly to the back end to achieve a more seamless transition to headless.

The StoreFront API allows the brand to connect a specific third party to a new store front and replace the previously dependent SHOPIFY app.

And it depends on Vite for "server side rendering (SSR), hydration middleware, client component code conversion".

The migration to the Hydrogen framework means that React.js, an open source JavaScript framework, is prioritized.

Similar to SHOPIFY, SHOGUN Frontend also considers React as the future of the headless steering front.

Liquid is mainly limited to SHOPIFY theme development, while React is widely used and is becoming increasingly popular.

With HYDROGEN, developers do not use Liquid to build and correct the SHOPIFY theme.

There are also advantages and drawbacks to use Shopify and Hydrogen to convert to headless. Let's look at those advantages and disadvantages one by one.

Hydrogen has a great attraction, given that SHOPIFY has put a lot of effort into large -scale projects. There are several benefits at the development stage.

React.js

Shopify considers React.js a dynamic, fast, and customized Commerce future.

This will make React.js even more credible as the next big trend of e -commerce.

You can get a starter kit

For those who start HYDROGEN, multiple starter templates and demo store are available.

(Example: button, toogle, navigation).

Although it is necessary to make an element on its own, it is a great advantage that you can use the components built in advance from the beginning.

The team can contribute to Hydrogen

SHOPIFY hopes to cooperate with the development of Hydrogen from the e -commerce development community. Especially if you have a strong development team, it can be formed from the early stage of the product vision, with the support of SHOPIFY.

You can reuse the created components

Since the starter kit is available, when you start, you can create an early element and repeat them over the entire site as needed.

Advanced app connection is available

There are several apps that are integrated with Hydrogen at this time. This includes CMS solutions such as Sanity and Contentful, and apps such as Klaviyo, Gorgias, Recharge, and Nosto.

Hydrogen also has some disadvantages. I will explain that.

Workflow that emphasizes developers built from scratch

This SHOPIFY framework, which is an effort to focus on code, provides the advantages of headlessness, but everything must be built by developers in Hydrogen.

This means that members who have no skill cannot access the front -end layer of the site and make changes. Drag and drop tools cannot be used for the 2022 roadmap. HYDROGEN will be perfect for the e -commerce team with development resources. ‍

There is no store preview yet

You can't see the real -time preview of the Store built in HYDROGEN, unless you build a preview environment yourself or use either a new page building solution.

This can make it difficult to implement with e -commerce team members who have no skill.

Use React Server Components

Hydrogen's output is not a static progressive web app (PWA).

Therefore, developers need to develop a SHOPIFY server. React Server Components can be said to be a new "beta version".

It's a very good idea, but it's not completely adopted by most developers.

Must connect CMS

Shopify cooperates with Sanity to provide CMS functions to the Hydrogen Store Front.

SANITY is a third -party CMS for developers that enables certain low code content management by team creating content data (images, text, video) schemas.

Minimal app support

SHOPIFY suggests the final app support, but is still in the early stage of the third -party application.

All APIs are not available yet. You need to create your own middleware for each SHOPIFY app you want to use. At this time, we only support the web store front. HYDROGEN cannot be used to create other types of custom store front desks such as smart devices, mobile apps, and video games.