Hydrogen: Shopify Headless Framework

Why Hydrogen

‍

The Hydrogen stack makes creating storefronts enjoyable because it has the trickiest components already built in, ready to use, or seamlessly connected with Shopify.

‍

Built for commerce

‍

Starter templates

There are two ways to begin: The fully constructed Demo Store template contains the customer's journey, and the Hello World template provides only the most basic commentary with optional TypeScript support.

‍

Components and hooks

To speed up development, Hydrogen provides pre-built components and hooks like customer accounts, product forms, search, pagination, and i18n that map directly to the Storefront API.

‍

Compatible with any React framework

Use Shopify's pre-built React components, such as Cart, Shop Pay, and Shopify Analytics, to speed up headless development and bring the finest features of Hydrogen to more React frameworks, such as Next.js and Gatsby.

‍

‍SEO ready

It includes pre-built SEO enhancements including an automatically produced sitemap, metadata values for each page, strong product feed support, and enhanced crawlability for all engines.

‍

Storefront API

Built on top of a variety of edge-rendered commerce APIs, this website gives all visitors the greatest experience possible.

‍

Performance

‍

Streaming server-side rendering with Suspense

‍

Suspense's streaming server-side rendering technology enables page elements to load gradually according to priority without reducing page interactivity.

‍

Oxygen deployment

Hydrogen storefronts are deployed at the edge of Oxygen, rendering static and dynamic content more quickly for effective shops globally.

‍

Caching strategies

Coming soon: Built-in stale-while-revalidate defaults, full-page, and sub-request caching APIs, and quick rendering components optimize the first load.

‍

Developer experience

‍

Hydrogen CLI

The Oxygen local instance is run via the Hydrogen CLI, which also helps scaffold boilerplate such as routes and components.

‍

TypeScript

VS Code tooling and robust type support for the Storefront API and all Hydrogen components make coding easier to understand and less error-prone.

‍

Powered by Remix

Unlock benefits in speed and developer experience, including optimistic user interfaces, nested routes, progressive enhancement, and more.

‍

Built-in CSS Support

Support for CSS techniques like Tailwind, CSS Modules, and Vanilla Extract is built-in and comes standard with Remix.

Built-in hosting at the edge

‍

Analytics

For each deployment, performance insights, analytics, and logs

‍

GitHub connectivity

Deployment is as easy as a git push because Oxygen connects directly to GitHub and leverages GitHub Actions to automatically deploy commits.

‍

Preview deployments

Every commit receives a separate preview deployment that can be made public or private.

‍

Custom environments

Custom environments receive their environment variables and a static URL and are connected directly to a branch.

‍