Shopify's stack for building faster headless commerce storefronts with React.
Hydrogen is Shopify's stack for headless commerce, providing tools, utilities, and examples to build dynamic and performant commerce applications. It enables developers to create custom storefronts that decouple the frontend from Shopify's backend, integrating with React Router for routing and offering a portable React library.
Developers and teams building custom headless storefronts on Shopify, particularly those using React and seeking optimized commerce applications with best practices.
Developers choose Hydrogen for its seamless integration with Shopify's APIs, best-in-class examples, and the flexibility of a portable React library, reducing development time while ensuring performance and dynamism in headless commerce projects.
Hydrogen lets you build faster headless storefronts in less time, on Shopify.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Hydrogen is designed to dovetail with React Router, providing optimized routing for commerce applications as stated in the README, which streamlines handling of dynamic routes and data loading.
The @shopify/hydrogen-react package offers an unopinionated library of components and hooks that can be used with other supporting frameworks beyond React Router, enhancing flexibility for developers.
Includes utilities and examples following Shopify's best practices for building dynamic and performant commerce applications, reducing initial development time and ensuring adherence to proven patterns.
The @shopify/hydrogen-codegen package automatically generates types for Storefront API and Customer Account API queries, ensuring type-safe development and reducing errors in GraphQL interactions.
Hydrogen is tied to Shopify's API versions that update every three months, and breaking changes can occur with each update, requiring regular maintenance and potential code refactoring.
The stack is tightly integrated with Shopify's ecosystem, making it unsuitable for projects that may need to switch to or support multiple commerce platforms, limiting portability.
For straightforward storefronts, the overhead of setting up and maintaining a headless stack with Hydrogen might be unnecessary compared to using Shopify's default Liquid themes, which are simpler to manage.