Hydrogen overview
Hydrogen is a front-end web development framework used for building Shopify custom storefronts. It includes the structure, components, and tooling you need to get started so you can spend your time styling and designing features that make your brand unique.
How Hydrogen works
Anchor link to section titled "How Hydrogen works"Hydrogen is the approach you use to build a custom storefront. It contains a framework and UI components.
Hydrogen framework: Hydrogen provides a Vite plugin which offers server-side rendering (SSR), hydration middleware, and client component code transformations.
Hydrogen UI components: Hydrogen includes components, hooks, and utilities that support features and concepts that exist in Shopify.
Data sources
Anchor link to section titled "Data sources"Hydrogen is built and optimized to use data coming from Shopify's Storefront API. The shape of the data passed to components, hooks, and utilities corresponds and conforms to the structure based on the GraphQL types from the Storefront API.
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.
Hydrogen is Shopify's recommended and opinionated approach to building creative and dynamic commerce experiences. If you're considering building a custom storefront, Hydrogen provides the following benefits.
Hydrogen provides the following templates to help you get started:
- Hello World: A minimal template for developers who want to build their Hydrogen storefront from the very beginning
- Demo Store: The default template installed when creating a new Hydrogen storefront. It’s a complete Hydrogen storefront that uses live production data provided by Shopify.
The Demo Store template is styled using the Tailwind CSS framework. You can start building with Tailwind or remove tailwind and style your Hydrogen storefront in your preferred way (such as CSS Modules).
Performance optimizations
Anchor link to section titled "Performance optimizations"Hydrogen's architecture enables a mix 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 modern approach to web development to offer 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 see your work instantly as you’re building it.
Fast development
Anchor link to section titled "Fast development"Hydrogen accelerates the development process by using Shopify’s foundational tech stack and commerce expertise. It integrates directly with the Storefront API for efficient data-fetching.
Hydrogen includes Shopify-specific components, hooks, and utilities for commerce. They're accessible, performant, and ready for use. They also help to reduce the initial complexity and boilerplate needed for building a custom storefront.
Hydrogen demo
Anchor link to section titled "Hydrogen demo"Watch Shopify's CEO, Tobi Lutke, build a custom storefront with Hydrogen:
Limitations and considerations
Anchor link to section titled "Limitations and considerations"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.
- Get started with Hydrogen and begin building a custom storefront.
- Learn about Hydrogen's architecture and framework.
- Get familiar with React Server Components.