Shopify has released a React-based framework for building dynamic, Shopify-powered custom storefronts called Hydrogen. Hydrogen accelerates the commerce development process by using Shopify’s foundational tech stack.
Hydrogen serves as the next-generation tech stack for Shopify-based sites, replacing the Liquid framework used to date. As such, Shopify storefronts launched on Liquid need to be rebuilt using Hydrogen. Hydrogen is also completely separate from Online Store 2.0 (aka OS2.0), and Storefront Apps will not work natively, and will require updating API integrations to work with Hydrogen. While these changes collectively will require developer effort, the advantages of this new development approach make it well worth the effort to deliver future-ready commerce experiences.
As you think about migrating, or launching a new storefront on Hydrogen, we tapped our development team for 4 things to consider if your business is thinking about upgrading from Liquid to Hydrogen.
Overall, we’re very bullish on the potential for Hydrogen. Coupled with Oxygen, the need for a third-party hosting service is eliminated since Shopify will host React natively through Oxygen.
This is a powerful new approach to headless commerce and a few things should be considered:
- Greater functionality and capabilities often introduce more complexities. Most Apps that interact with any front-end functionality will not work with Hydrogen out-of-the-box, making it a priority that any Storefront App has API endpoints in order to integrate and operate as intended.
- Running the storefront channel on a React stack provides brands with a new toolset to optimize data sources. The result is sites that are more performant (think faster and scalable), while also being SEO-friendly, opening up new avenues of discovery and enabling richer user experiences.
- React is an open-source front-end JavaScript library that allows developers to create large web applications that can repopulate data, without reloading the page. It provides a fast and scalable modern framework that consolidates development efforts within an identifiable pattern and works to simplify staffing challenges. With the React framework, a frontend developer can create a presentation layer that stitches together multiple backends, without having to learn the underlying technologies.
- As noted, the Hydrogen solution is a reference architecture that facilitates better product discovery. It does not however extend to checkout. Checkout would need to be addressed as a separate part of the project.
Looking forward, as Shopify rolls out revamped APIs, Hydrogen alongside the Oxygen distributed solution will offer a very attractive offering for brands embracing a headless front-end commerce solution.
