Coming Soon: Shopify Hydrogen

Shopify has been developing and is soon to release a new headless framework for building storefronts called Hydrogen. Hydrogen is a React-based development framework that gives designers and developers the creative flexibility and capabilities to integrate with Shopify and other backend services all in a robust and secure package. With Hydrogen, you can build eCommerce stores that are both dynamic and fast.

Features

Hydrogen comes with a toolkit and components that let developers build unique looking and engaging storefronts and gives design teams more freedom. Freedom to create expressively and feature-rich personalised customer experiences.

Hydrogen’s Headless offering means it’s easier to integrate new cloud-based tools and existing systems, for example:

• You can easily integrate Hydrogen with Marketing automation tools like a CMS or CRM
• Your organisation can pull key information from your ERP or Product Inventory Management System
• Communication between all your critical data infrastructure can work in unison.

Create exceptional customer journeys

Hydrogen provides more flexibility in design, using Hydrogen will make it faster to design, build, and test different creative layout options and make strategic decisions based on data analysis and interpretation. Measure positive outcomes gathered from studying behaviour and successful user journeys and unlock potential revenue opportunities.

The customer wants and needs will change over time, and what your store offers should be able to adapt quickly and consistently. According to a PWC study, 73% of consumers state that the customer experience is a vital factor in their purchasing decision. And 43% are willing to pay more for greater convenience.  

Part of that convenience is that your website is responsive to the demands that are placed on it. Bear in mind that Google penalises websites with low page load speed. More importantly, customers or visitors will stop returning to such sites or bounce when pages take too long to load, resulting in the loss of potential customers and revenue.

A one-second delay leads to a 7% reduction in conversion.

Hydrogen employs smart tactics for ensuring that page speed is high and as a result customer experience is consistent.

Technical considerations

React Server Component is a way to write components that get rendered on the server-side with the purpose of improving React app performance. React Server Components allow the server and the client to work together to render your Hydrogen app. Smart caching defaults and streaming server-side rendering with suspense, paired with the globally distributed Storefront API basically means that everything is optimised to work fluidly and be responsive to interaction.

React Server Components separate client and server logic. This separation provides the following benefits to Hydrogen apps:

• Server-only code that has no impact on bundle size and reduces bundle sizes
• Server-side access to custom and private server-side data sources
• Seamless integration and a well-defined protocol for server and client components
• Streaming rendering and progressive hydration
• Subtree and component-level updates that preserve client state
• Server and client code sharing, where appropriate

Because hydrogen is react based it will be familiar to many JavaScript developers this means taking on a new tool like Hydrogen won’t be as difficult as introducing completely new technology into your developer’s stack.

Hydrogen provides Shopify-optimised commerce components guaranteeing seamless functionality with the Shopify store.

Hydrogen contains a set of Shopify-specific commerce components, hooks, and utilities that help accelerate the development process.

There are so many great functional components, if you are interested in digging deeper you can find a full Hydrogen component overview list here.

Some bright spots that I know our team are excited about are:

MemorySessionStorage & CookieSessionStorage

The default session storage mechanism for Hydrogen. Stores session data within Hydrogen runtime memory. This basically means it will be easier to show shoppers browsing the store relevant information, like previously viewed items.

Hydrogen can also support data from third-party sources. If you want to use Hydrogen components with a third-party data source, then data from the third-party source must first be transformed into the types expected by the Hydrogen components, hooks, and utilities, and then passed on to the components, hooks, and utilities.

Ready to Hydrogen?

Before we get too excited, an important limitation for Hydrogen is that it’s not quite production-ready. You can use Hydrogen in Production, but the official green flag from Shopify for production-ready use is not formally anointed by Shopify, we are within touching distance. 

According to Shopify the first release of the framework should be available ‘within the next few weeks’ as of May 2022.

Our recommendations

As it’s not production-ready and this will be the first version it’s not advisable that you run this on your production store just yet. 

There are examples of stores running Hydrogen in production. I would only recommend this if you have the support of a development team that’s on hand if you intend to use this in production. Even beyond the initial release.

There is an open CVE security concern with Cross-site scripting but this can be mitigated by using version  0.19.0 and above of Hydrogen.

Some other considerations are Hydrogen can only be used to build Shopify web storefronts. Currently, Hydrogen doesn’t support building other types of custom storefronts, including mobile apps, video games, and smart devices.

Hydrogen is a very exciting new technology by Shopify and we can’t wait to bring the power and flexibility to our partners very soon. Get in touch with our team to discuss your Shopify project.