• #Development

Everything you need to know about Shopify Hydrogen and Oxygen

August 9, 2022 - by CrawlApps Technologies

Everything you need to know about Shopify Hydrogen and Oxygen

Central aspects of a buyer’s journey, just like the add-to-cart flow or localization, are nuanced, complex, and expensive to induce wrong. Shopify has spent the last decade advancing the first Online Store. We all know what it takes to create a successful storefront and has strong opinions on where commerce goes.


Using the Online Store and Liquid or going custom with Hydrogen and hosting on Oxygen. We’re building on top of the best-in-class proven technologies, and we’ve made Hydrogen.


Now days, most Software development companies prefer Shopify to develop an eCommerce store.



Hydrogen: Shopify’s New React-Based Framework


One of Shopify’s biggest announcements at Shopify Unite was Hydrogen, a React-based framework and also the eCommerce giant’s recommended approach to assembling super fast, dynamic eCommerce stores.


Just some days ago, Shopify shared that Hydrogen is now available in the developer preview. By combining Shopify’s sophisticated commerce-optimized components with a quickstart environment, Hydrogen makes it easier than ever before to form custom storefronts. It enables Shopify developers to make “headless” stores, within which the customer-facing frontend resides other than the data-processing backend.


Hydrogen will help Shopify developers provide far more dynamic shopping experiences to their customers by using React, a JavaScript library (collection of prewritten code) accustomed to constructing interactive user interfaces. Creating interactive user interfaces may be a breeze using React. When your data changes, React will instantly update and render the right components after you use simple views for every state of your application.



What is Hydrogen?


Shopify’s Hydrogen may be a React-based


Shopify’s Hydrogen may be a React-based framework that gives pre-built components for creating a custom storefront.


This means that developers and their clients won’t be restricted to pre-designed templates for or their store’s design. They’ll be able to easily create a completely new online shopping experience from the beginning. Hydrogen integrates one’s storefront to Shopify through webhooks, allowing one to create use of Shopify’s intuitive eCommerce features while keeping total control over the frontend user experience.


Typically, you would exit the browser, install Node.js, Git, and a code editor, then initialize the project. However, with the appearance of WebContainers earlier this year, this is often now not necessary.



How Hydrogen works



How Hydrogen Works



Hydrogen is the approach you utilize to make a custom storefront. It contains a framework and a library of components, hooks, and utilities:


Hydrogen Framework: Hydrogen provides a Vite plugin that offers server-side rendering (SSR), hydration middleware, and client component code transformations.


Hydrogen Components, Hooks, and Utilities: Hydrogen includes components, hooks, and utilities that support features and ideas that exist in Shopify. They’re accessible, performant, and prepared to be used. They also help to scale back the initial complexity and boilerplate needed for building a custom storefront.



Data Sources


Hydrogen is made and optimized to use data coming from Shopify’s Storefront API. The form of the info passed to components, hooks, and utilities correspond and conform to the structure supporting the GraphQL types from the Storefront API.


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



Hydrogen Data Sources



Performance Optimizations


Hydrogen’s architecture enables a combination of static and dynamic data fetching between client- and server-side for optimized performance. It’s built on top of newer web technology, and takes a contemporary approach to web development to supply the following:


  • Built-in caching controls to handle dynamic content and minimize API calls for speed and performance.


  • Server-side rendering to optimize the initial load.


  • React Server Components, an opinionated data-fetching and rendering flow for React apps. React Server Components offer an improved development experience. Components render fast, which allows you to work out your work instantly as you’re building it.


Performance enhancements


Linters to boost your code automatically, and in-browser developer tools that provide insight into your body’s performance. We’re also continuing to create complex concepts like caching simple and help your build stay performant while working with media, third-party scripts, and other areas which will negatively impact performance.


Developer experience enhancements


We’re continuing to speculate within the developer experience to create it as productive and expressive as possible. From fixing common integrations to scaffolding out boilerplate and building common UI patterns, we would like to attenuate the work you do not like doing, help when you’re stuck and offer helpful tools to hurry up your workflow.


Incremental adoption from Online Store


We’ve built and are continuing to enhance prototypes that allow a gradual move from Online Store and Liquid to Hydrogen builds. In our coming cycles, we’ll solidify and polish strategies to permit Hydrogen and Liquid to own a more fluid relationship, so you can get the results of your build even faster.


More integration with storefront apps


V1, we announced support for a few of the foremost popular apps, but we’re making it easier to feature apps to Hydrogen. We’re prototyping a richer plugin architecture with new entry points across multiple surface areas, creating new ways to make hyper-performant widgets, and documenting more clearly on the Shopify App Store which apps are supported.


Deeper integration with Shopify Admin


We want to make integrating with the various parts of the Shopify Admin easier. We’ve launched features like Shopify Analytics, Customer Accounts, and Shop Pay, but within the upcoming months, we’ll still build deeper integrations and improve our APIs.



What is Oxygen?


Hydrogen GitHub Workflow


Shopify also announced Oxygen, a worldwide cloud server infrastructure, to help merchants in hosting and deploying Hydrogen-based apps. it will assist you in hosting custom storefronts, collaborating with design teams via GitHub, and even deploying Shopify Hydrogen applications to a live shop using your own workflow.


No matter where your consumers are, Shopify’s new cloud architecture will make sure that your shop always loads quickly by hosting your Hydrogen app code alongside its Storefront API.


What if you would like to host it yourself? In this case, Shopify will package your Hydrogen application as a Dockerfile so you will host it yourself. you will have everything you wish to style and implement your store’s online buying experience.



Here is the most beautiful update given by Shopify. When you guys are free to check please check the below tutorial.


Hydrogen & Oxygen. I’ve attached some documents along with some very helpful anchor text links that you can guys check it:


Hydrogen & Oxygen Roadmap


Case Studies (Shopify’s Hydrogen and Oxygen)


Hydrogen Customfronts Dev Docs









Keep reading