使用氢气的 Headless Shopify：何时以及如何

大多数 Shopify 商店不需要无头。这一说法与 Shopify 开发者圈子里的主流说法背道而驰，在这个圈子里，无头往往被定位为每个严肃的电子商务品牌不可避免的演变。现实情况更加微妙：无头 Shopify 对于特定商家来说是正确的选择，而对于许多其他愿意花费更多资金以获得稍微更好的结果的人来说则是错误的选择。

本指南解释了无头 Shopify 的实际含义，当 Hydrogen（Shopify 官方的基于 React 的无头框架）是合适的选择时，如何使用它进行构建，以及如何在承诺之前进行诚实的成本效益评估。

要点

• Headless Shopify 通过 Storefront API 将店面（前端）与商务引擎（Shopify 后端）解耦
• Hydrogen 是 Shopify 官方基于 React 的无头店面框架，构建于 Remix 之上
• 大多数年收入低于 500 万美元的商店都可以通过优化的 Shopify 2.0 主题获得比无头架构更好的服务
• 在以下情况下使用 Headless 是合理的：高度定制的 UX 要求、内容商务集成、多渠道发布或极端的性能要求
• Oxygen 是 Shopify Hydrogen 应用程序的托管平台 - 具有全球边缘网络的零配置部署
• 对于持续维护来说，headless 的总拥有成本比基于主题的 Shopify 高 3-5 倍
• Shopify 的 Storefront API 提供对产品、产品系列、购物车、结帐和客户数据的访问
• Remix（底层 Hydrogen）支持服务器端渲染和流式 HTML，以实现出色的 Core Web Vitals

---

Headless Shopify 的实际含义

在传统的 Shopify 商店中，一切都在 Shopify 平台上运行：产品数据、店面主题、购物车、结帐、客户帐户和订单管理。 Liquid 模板语言在 Shopify 基础架构上的服务器端呈现产品页面。

在无头 Shopify 架构中：

• 商务引擎 (Shopify)：管理产品、库存、订单、客户、付款和履行 - 不变
• Storefront（您的自定义前端）：一个单独的应用程序 - React、Next.js、Hydrogen 或任何 Web 框架 - 通过 Storefront API 从 Shopify 获取数据并呈现面向客户的体验

前端可以在任何地方运行：Vercel、Netlify、Cloudflare Workers、Shopify 自己的 Oxygen 平台或您自己的基础设施。商务后端仍然是 Shopify。

你为什么要这样做？

无头的动机始终是以下一项或多项：

• 自定义用户体验在 Shopify 的部分/块主题架构中无法实现
• 内容商务集成 — 将产品嵌入到 CMS 中，例如 Contentful、Sanity 或 Prismic
• 多渠道发布 - 为网站、移动应用程序、数字标牌和语音商务提供支持的相同产品数据
• 性能 — 完全控制 JavaScript 包、组件加载和渲染策略
• 技术团队偏好——React 开发团队发现 Liquid 模板不舒服

---

Hydrogen：Shopify 的官方 Headless 框架

Hydrogen 是 Shopify 基于 React 的框架，用于构建无头 Shopify 店面。它构建在 Remix（React 框架，现在是 React Router 7 的一部分）之上，并针对 Shopify 的 Storefront API 进行了优化。

氢气提供什么

氧气：Shopify 的氢气边缘托管

Oxygen 是 Shopify 针对 Hydrogen 应用程序的全球边缘部署平台。它包含在 Shopify Plus 中，无需额外付费。 Oxygen 将您的 Hydrogen 应用部署到 Cloudflare 的全球边缘网络 - Shopify 自己的店面使用相同的基础设施。

Oxygen 与第三方托管相比的优势：

• 通过 Shopify CLI 进行零配置部署
• 您的自定义域上的自动 HTTPS
• 具有边缘缓存的全球CDN
• 与 Shopify 数据基础设施的一流集成（减少 API 延迟）
• 典型流量无出口或计算定价

选择 Vercel 或 Netlify 而不是 Oxygen 的主要原因：您需要 Oxygen 不支持的托管功能（数据库连接、需要非边缘运行时的外部 API 集成等），或者您不在 Shopify Plus 上。

---

Shopify 店面 API：您可以访问什么

Storefront API 是 Hydrogen（以及任何无头实现）用来获取数据的公共 API。它是一个带有公共访问令牌的 GraphQL API——基本操作不需要服务器端秘密。

可用资源

店面 API 不能做什么

为了在无头设置中实现完整的商务功能，您通常需要 Storefront API（公共，客户端）和 Admin API（私有，仅服务器端）来进行管理级操作。

---

建立氢店面：基础知识

项目创建

npm create @shopify/hydrogen@latest
# Select: Connect to existing Shopify store
# Enter your myshopify.com domain
# The CLI creates a Hydrogen project with Storefront API connected

这构建了一个完整的氢项目：

• Remix v2 路由（/app/routes/ 中基于文件的路由）
• 预配置 Shopify Storefront API 客户端
• 产品、收集和购物车路线示例
• 氧气部署配置

核心架构模式

Hydrogen 使用 Remix 的加载器模式来获取服务器端数据：

在产品路径 (/app/routes/products.$handle.tsx) 中，加载器函数从服务器上的 Storefront API 获取产品数据，使用 React 进行渲染，并流式传输 HTML 响应。这与客户端 SPA 渲染有本质的不同——HTML 在到达浏览器时是完整的，这对于 SEO 和 Core Web Vitals 至关重要。

购物车：客户端复杂性

Hydrogen 中的购物车使用 Shopify 的购物车 API（服务器持久的购物车，不是基于 localStorage）。 Hydrogen 提供了 CartProvider 上下文和 useCart 挂钩，用于管理购物车状态并与 Shopify 的购物车 API 同步。购物车操作（添加、更新、删除）是乐观的 - UI 立即更新，API 调用在后台发生。

结账重定向

Hydrogen 的标准结帐流程将客户重定向到 Shopify 的托管结帐 URL。这意味着您的自定义前端处理店面体验，但结帐本身仍然在 Shopify 的基础设施上运行（内置所有 Shopify Payments、信任和结帐优化）。

对于 Shopify Plus 上也想要完全自定义结帐的商家来说，结帐扩展性是合适的路径 - 而不是在 Shopify 之外构建自定义结帐。

---

当无头值得时

使用这个决策框架：

性能论点：经常被夸大

许多无头倡导者将性能作为主要理由。但 Shopify 的 Dawn 主题（以及经过充分优化的高级主题）获得了出色的 Core Web Vitals 分数。优化良好的原生主题和优化良好的 Hydrogen 应用程序之间的性能上限差异对于现实世界的流量来说通常是微乎其微的。

Headless 真正在性能上获胜的地方：具有复杂过滤的非常重的产品目录页面、具有视频和动画的丰富媒体编辑体验，以及需要积极的边缘缓存策略的网站，而 Shopify 的 CDN 无法单独优化。

内容商务整合论点：通常被低估

无头技术最有力的案例是内容商务整合。与产品一起发布编辑内容（嵌入产品的产品手册、食谱、操作指南）的品牌可以从统一的内容模型中获益匪浅。包含产品参考的 Contentful 或 Sanity CMS 从 Shopify 的店面 API 中提取产品数据，并在统一的 SEO 优化页面中呈现编辑 + 商务。如果不做出重大妥协，这是在原生 Shopify 中无法实现的。

---

Headless 与 Native 主题：总成本比较

成本差异是真实且显着的。对于年收入 200 万美元的品牌来说，无头 Shopify 的初始开发成本可能为 150,000 美元，每年的维护成本为 50,000 美元，这使得 Shopify Plus 订阅成本相形见绌。投资回报率计算必须显示改进的用户体验对收入产生的重大影响，以证明这一点。

---

应用程序兼容性：隐藏的无头挑战

Shopify 应用生态系统主要是为基于 Liquid 的原生店面构建的。许多流行的 Shopify 应用程序将 JavaScript 注入 Liquid 主题 - 它们没有等效的 Storefront API。

无头工作的应用程序

无法无头运行的应用程序

大多数使用 Liquid 主题集成、ScriptTag 或 checkout.liquid 的 Shopify 应用与无头店面不兼容。这包括许多 CRO 工具、一些忠诚度应用程序和遗留审核平台。

在进行无头之前，请审核整个应用程序堆栈的兼容性。每个不兼容的应用程序都需要：(1) 找到无头兼容的替代方案，(2) 构建自定义功能，或 (3) 接受该功能的丢失。

---

替代方案：“混合”方法

许多商家并不是完全无头，而是从混合方法中受益：

• 适用于大多数店面的标准 Shopify 主题（应用程序兼容性高，维护成本低）
• 针对特定高价值页面（主页、产品页面）的自定义 React 应用程序，其中独特的用户体验很重要
• Shopify 的 Storefront API 为原生主题中的自定义组件提供支持

这种混合模型降低了成本和复杂性，同时在最重要的地方提供自定义用户体验。

---

常见问题

我需要 Shopify Plus 来实现无头 Hydrogen 吗？

否 — Hydrogen 和 Storefront API 在所有 Shopify 套餐中均可用。 Oxygen 托管（Shopify 的 Hydrogen 边缘平台）需要 Shopify Plus。在其他计划中，您可以在 Vercel、Netlify、Cloudflare Workers 或任何 Node.js 兼容主机上托管 Hydrogen 应用程序。无论计划如何，Storefront API 访问和 Hydrogen 框架均完全可用。

SEO 如何在 Hydrogen 无头商店中发挥作用？

Hydrogen 使用 Remix 的服务器端渲染，在服务器上生成完整的 HTML - 与 Shopify 的原生 Liquid 主题相同的方法。搜索引擎爬虫接收完全呈现的 HTML，其中所有产品内容都可见。 Hydrogen 包括用于元标记、规范 URL 和结构化数据的 SEO 实用程序。与 CSR（客户端渲染）SPA 相比，SEO 优势非常显着；与原生 Shopify 主题相比，如果两者配置正确，差异很小。

Hydrogen 和 Next.js Commerce for Shopify 之间有什么区别？

两者都是基于 React 的无头 Shopify 框架。 Hydrogen 是 Shopify 的官方框架，基于 Remix 构建，具有一流的 Shopify Storefront API 集成、Oxygen 托管和 Shopify 特定的帮助程序（购物车、结帐、分析）。 Next.js Commerce 是 Vercel 的无头电子商务开源入门套件，支持包括 Shopify 在内的多个平台。 Hydrogen 具有更深入的 Shopify 特定优化；如果您可能切换商务平台或需要 Next.js 特定的功能，Next.js Commerce 可以提供更大的灵活性。

我可以通过无头前端使用 Shopify 的结帐吗？

是的——这是标准的无头模式。您的自定义 Hydrogen 前端负责处理店面，并在结帐时重定向到 Shopify 的托管结帐 URL（从购物车 API 的 checkoutUrl 字段生成）。这为您提供了用于产品发现和购物车的完整自定义用户体验，以及 Shopify 针对付款步骤进行优化、经过转化测试的结帐。结帐扩展性 (Shopify Plus) 允许使用扩展自定义 Shopify 结帐本身。

氢实施通常需要多长时间？

完全定制的 Hydrogen 店面取代成熟的 Shopify 主题：16-52 周，具体取决于复杂性。针对新店推出的更简单的 Hydrogen 实施，没有遗留的复杂性：8-16 周。关键的时间线驱动因素包括：定制设计的复杂性、产品类型的数量和目录大小、所需的应用程序生态系统更换以及团队在氢方面的经验。

---

后续步骤

Headless Shopify with Hydrogen 是适合合适商家的强大架构，但决策需要诚实评估您的用户体验要求、开发人员能力、预算和应用程序生态系统依赖性。

ECOSIRE 的 Shopify Plus 服务 包括无头架构咨询、Hydrogen 店面开发、Storefront API 集成和 Oxygen 部署。我们帮助商家评估无头是否是正确的选择，并在正确时执行实施——包括以比完全无头更低的成本提供定制用户体验的混合方法。

安排无头架构咨询 来评估您的具体要求，并就无头 Shopify 是否适合您的商店进行正确的投资获得诚实的建议。