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.
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:
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.
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:
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:
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.
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.
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.
Latest Shopify News - Remix is a free, React based framework that allows developers to build Headless websites quickly.
December 2022 | Gabriele Rucinskaite
How to add essential brand assets to your Shopify store
Not sure where to start once you've started with Shopify? Set up your eCommerce store branding with these easy steps.
October 2022 | Gabriele Rucinskaite