用途:Hydrogen 用于构建完全自定义的 Shopify 无头店面,适合默认主题无法满足设计需求、需要服务端渲染、流式传输与边缘部署性能,或需直接集成第三方服务(忠诚度、CMS、个性化)的场景。
主要能力:基于 Remix 文件路由;提供 Storefront API 原语(商品查询、购物车管理、客户账户)及 Shopify 专用组件与 hooks,自动处理缓存、流式渲染与 SEO;支持命名缓存策略(CacheLong、CacheShort、CacheNone、CacheCustom);支持新版 Customer Account API(OAuth)。
使用方式:用 npm create @shopify/hydrogen@latest -- --quickstart 脚手架项目,npm run dev 本地运行(http://localhost:3000)。在 Shopify 后台创建 Storefront API 令牌,配置 .env 中的 SESSION_SECRET、PUBLIC_STOREFRONT_API_TOKEN、PUBLIC_STORE_DOMAIN、PUBLIC_STOREFRONT_API_VERSION。通过 server.ts 的 createHydrogenContext 接入 Remix;在 loader 中用 storefront.query 查询,在 action 中用 CartForm 与 cart 工具处理购物车。部署用 shopify hydrogen deploy,CI/CD 可用 Shopify/hydrogen-action@v1。
限制与注意:需 Node.js 18+,示例为 TypeScript/Node.js;Oxygen 环境变量须在 Shopify 后台部署设置中添加;GraphQL 查询需标记 as const 并在改动后运行 npm run codegen;令牌需具备 unauthenticated_read_* 权限;购物车 ID 应存于签名 cookie 而非组件状态。资料未提供具体收费与价格信息。