Shopify’s Approach to Headless: Hydrogen and Oxygen

In this week’s blog, we give you a detailed overview of these latest frameworks launched by Shopify as well as benefits and drawbacks associated with the same:

What is Shopify Hydrogen?

Shopify Hydrogen is a new React framework that allows developers to create genuinely unique custom Shopify storefronts. At present, developers can build bespoke Shopify themes using the templating language called Liquid. However, this does come with some limitations of the platform. 

Shopify Hydrogen offers the ultimate developer tool set with pre-built components to allow developers to build headless stores and access utilities that natively integrate with Shopify as the backend platform. By leveraging Hydrogen’s tools and advanced functionality, developers can build a robust and highly scalable store from scratch. It consists of excellent React components such as a Shopping cart, content gallery and variant picker. These exciting elements, which integrate seamlessly into any custom Shopify storefront, will compel customers to keep returning to your site.

What is Shopify Oxygen?

The aptly named Oxygen is Shopify’s hosting solution for Hydrogen storefronts. 
Shopify Oxygen is deployed worldwide on more than a hundred server locations. A global hosting infrastructure all over the world makes Shopify shops closer to their customers and enables the loading speeds that brands expect with headless commerce. 

Benefits of Hydrogen

Following are the advantages merchants can enjoy by switching to Shopify Hydrogen:

• Higher Flexibility: In the traditional store, you are using liquid as the template engine and any kind of third-party integrations would be usually done from the client side if you are fetching content. However, with this framework, you can bring your own stack and take complete control over routes, apps, third-party API & integrations and you can render it all through the server.
• Optimized Performance: Hydrogen solves a lot of problems that other frameworks suffer from. In the traditional framework, constantly making updates according to the latest data can kill your performance. However, Hydrogen optimizes your performance by fetching real-time data and allows you to update your website accordingly.
• New Tools: Hydrogen introduces some latest tools that can help build customized storefronts. It uses React 18, which gives the framework access to react server components and internet streaming. Hydrogen also has developer experience, you can use its components to create an app super-quickly.
• Easy Storage : Traditionally, when you build a custom storefront, you have to figure out the hosting platform, server, backups, scale, and uptime. With oxygen, which is powered by Cloudflare, you can easily store the custom storefront.
• Rapid development process: Hydrogen includes starter templates with the basic file structure of a project already integrated with a Shopify store. That means that you can skip the setup process and start coding at once. A variety of components, hooks, and utilities are integrated directly with the Storefront API, helping optimize data fetching by saving time from crafting GraphQL queries to interacting with Shopify APIs or other third-party data sources. Although, it is not as fast as liquid yet, but compared to any other headless option, this will be much faster.
• Performance upgrades:
  Shopify Hydrogen’s architecture combines fetching both static and dynamic content on the client and server sides. Here are some top current web development options:
  • Dynamic content is generated by build-in cache-control to minimize API calls and upgrade speed and performance;
  • Server-side tracking focuses on reducing the initial burden;
  • React Server Components provide a better development experience allowing you to quickly see your work as you construct it

Drawbacks of Shopify Hydrogen

Along with many benefits of becoming headless, there are also some disadvantages that come with this framework as well. While this Shopify framework gets you the benefits of going headless, there is a need for experienced developers to build it. Unless you want to build a preview environment yourself or use one of the new page-building solutions, you can’t see a real-time preview of the Hydrogen-powered store you’re building. Moreover, there aren’t APIs available for everything just yet and you will need to create middleware yourself for every Shopify app that you want to use. ‍At this time, Hydrogen only supports web storefronts and can’t be used to create other types of custom storefronts, like smart devices, mobile apps, and video games.‍

Conclusion

All in all, these latest updates assure higher flexibility and a worldwide bundle of possibilities for the Shopify merchant community to improve their store’s design, functionality, and performance. However, if you’re looking at Hydrogen as a headless solution, you should consider that it may not outpace Liquid for some time.

Moreover, adopting these changes isn’t going to be a cakewalk. But, with the right technology partners, you can efficiently craft out an execution plan that is going to help adopt headless solutions and boost conversions.