Shopify 无头商务与氢：何时以及为何进行无头

无头商务将您的店面（客户所看到的）与后端（数据和业务逻辑所在的位置）分离。您无需使用 Shopify 的内置 Liquid 主题系统，而是构建一个通过 API 与 Shopify 进行通信的自定义前端。 Shopify 的 Hydrogen 框架和 Storefront API 使寻求最大前端控制和性能的开发团队可以使用此架构。

问：什么是 Shopify 无头商务？

Shopify 无头商务是一种架构，其中面向客户的店面是一个单独的应用程序（通常使用 React 或类似框架构建），它通过 Shopify 的店面 API 获取产品数据、处理购物车并处理结帐。 Shopify 处理后端（产品、订单、付款、履行），而您可以完全控制前端体验。

传统 Shopify 与 Headless Shopify 的工作原理

传统 Shopify（整体式）：

Customer Request → Shopify Servers → Liquid Theme Rendering → HTML Response

一切都在 Shopify 内管理。主题使用 Liquid 模板语言。自定义仅限于 Liquid 和主题编辑器允许的范围。

无头 Shopify：

Customer Request → Your Frontend (Hydrogen/React/Next.js) → Storefront API → Shopify Backend

您的前端应用程序向 Shopify 发出 API 调用以获取产品数据、购物车管理和结账。您可以控制用户界面的每个像素。

什么是氢？

Hydrogen 是 Shopify 用于构建无头店面的官方框架。它基于 Remix（React 框架）构建，并提供：

• 预构建的商务组件 -- 产品卡、购物车抽屉、价格显示和变体选择器
• Storefront API 客户端 -- 针对产品、产品系列和客户数据的类型安全 GraphQL 查询
• Oxygen 托管 -- Shopify 的全球边缘托管平台针对 Hydrogen 应用程序进行了优化
• SEO 实用程序 -- 自动站点地图生成、元标记管理和结构化数据帮助程序
• 缓存层 -- 用于 Storefront API 响应的内置缓存控制
• 分析集成 -- Shopify 的分析和转化跟踪已预先配置

Hydrogen 通过提供特定于商业的原语，将构建无头店面的时间从几个月缩短到几周。

店面 API

Storefront API 是无头 Shopify 的支柱。它是一个 GraphQL API，提供对以下内容的读取访问：

|资源 |能力| |----------|-------------| |产品 |查询产品、变体、图像、定价、元字段 | |收藏|浏览收藏、过滤产品、对结果排序 | |购物车 |创建购物车、添加/删除商品、应用折扣 | |客户|身份验证、订单历史记录、地址 | |店铺 |商店政策、付款方式、配送区域 | |内容 |页面、博客文章和元对象 | |搜索 |使用过滤器和预测搜索进行产品搜索 |

该 API 支持经过身份验证的（特定于客户的）和未经身份验证的（公共店面）查询。速率限制很宽泛：大多数操作每秒 100 点。

问：您可以在无头店面中使用 Shopify checkout 吗？

是的。无头商店使用购物车 API 构建购物车，然后将客户重定向到 Shopify 的托管结账 (checkout.shopify.com) 进行付款处理。 Shopify Plus 商家可以使用 Checkout Extensions 自定义结账。托管结账处理 PCI 合规性、支付处理和订单创建。

无头的性能优势

使用 Hydrogen 构建的无头店面在 Core Web Vitals 上始终优于传统 Liquid 主题：

• 最大内容绘制 (LCP)： Hydrogen 应用程序利用流式服务器端渲染和边缘缓存在 1.5 秒内实现 LCP
• 首次输入延迟 (FID)： React 高效的事件处理和代码分割导致 FID 低于 50 毫秒
• 累积布局偏移 (CLS)： 组件级布局控制消除了意外的内容偏移
• 首字节时间 (TTFB)： Oxygen 的全球边缘网络从最靠近客户的服务器提供响应

这些性能提升直接转化为更高的转化率和更好的搜索排名。对于性能已经成为瓶颈的商店来说，改进是可以衡量的。

何时去无头

无头商务并不是每个企业的正确选择。它增加了复杂性和开发成本。如果出现以下情况，请考虑无头：

无头的充分理由：

• 您需要 Liquid 主题无法提供的高度自定义的前端体验
• 您的商店拥有复杂的产品配置器、3D 查看器或交互元素
• 您运营多个店面（网络、移动应用、信息亭），共享一个 Shopify 后端
• 您需要将来自无头 CMS（Contentful、Sanity、Strapi）的内容与商业集成
• 性能至关重要，您已经达到了主题优化的极限
• 您的开发团队精通 React 和现代 JavaScript 框架
• 您在多个市场进行销售，需要深度本地化的体验

当无头增加不必要的复杂性时：

• 您的商店有一个带有标准产品页面的简单目录
• 您的团队中没有 React 开发人员，也没有预算来雇用他们
• 您当前的 Liquid 主题满足您的设计和功能需求
• 您严重依赖注入前端功能的 Shopify 应用程序（大多数应用程序不适用于无头）
• 您的企业规模较小且预算有限

什么时候不应该无头

同样重要的是要了解无头商务何时产生的问题多于其解决的问题。

无头可能不值得，如果：

1. 您依赖 Shopify 应用程序 - 大多数 Shopify 应用程序将脚本注入 Liquid 主题中。在无头设置中，这些应用程序无法在前端运行。您必须重建它们的功能或找到基于 API 的替代方案。
2. 你缺乏开发资源 -- 无头商店需要持续的前端开发。 Shopify 的主题更新不适用。必须构建每个新功能。
3. 您的定制需求不大 - Shopify 的在线商店 2.0 主题随处可见，主题编辑器无需代码即可提供重要的定制。
4. 您没有内容策略 -- 当您集成来自外部 CMS 平台的丰富内容时，Headless 会大放异彩。如果您的内容需求很简单，那么增加复杂性是不合理的。

架构选项

如果您决定采用无头技术，您有多种前端框架选择：

|框架|托管| Shopify 集成 |最适合 | |------------|---------|--------------------|----------| |氢（混音）|氧气（Shopify）|原生、最深度的集成 | Shopify 首家无头商店 | | Next.js | Vercel、AWS、自托管 |通过店面 API |拥有 Next.js 专业知识的团队 | |盖茨比| Netlify、AWS |通过店面 API |内容丰富的网站 | | Nuxt.js | Vercel、Netlify |通过店面 API | Vue.js 团队 | |自定义 React/SvelteKit |任何托管|通过店面 API |最大程度的控制|

Hydrogen on Oxygen 提供与 Shopify 生态系统最紧密的集成，包括自动结账集成、分析和 Shopify 托管托管。

迁移路径：主题到 Headless

从 Liquid 主题迁移到无头店面是一个重要的项目。分阶段的方法可以降低风险：

第 1 阶段：评估（1-2 周）

• 审核当前主题功能和第三方应用程序依赖项
• 确定哪些应用程序具有基于 API 的替代方案
• 定义自定义前端要求，以证明无头化的合理性
• 估计开发工作量和时间表

阶段 2：API 层（2-3 周）

• 设置 Hydrogen 项目和 Storefront API 客户端
• 为产品、集合和内容构建 GraphQL 查询
• 通过 Cart API 实现购物车功能
• 设置客户帐户的身份验证

第 3 阶段：前端构建（4-8 周）

• 构建店面 UI 组件
• 实施产品页面、产品系列页面和搜索
• 创建购物车和结账流程
• 集成来自 CMS 的内容
• 设置分析和转化跟踪

第 4 阶段：测试和发布（2-3 周）

• 性能测试和优化
• SEO 验证（规范 URL、站点地图、结构化数据）
• 跨浏览器和设备测试
• 分阶段推出并进行流量分割

总时间：9-16 周，具体取决于复杂程度。

氢气的性能优化

即使具有 Hydrogen 固有的性能优势，优化也很重要：

• 使用流式 SSR -- 首先渲染关键内容并流式传输其余内容
• 实现路由级代码分割 -- 只加载当前页面需要的JavaScript
• 缓存 Storefront API 响应 -- 使用 Hydrogen 的内置缓存和适当的 TTL
• 优化图像 -- 使用具有响应式大小调整功能的 Shopify 图像 CDN
• 预取导航目标 -- 在后台加载下一个可能的页面
• 最小化客户端 JavaScript -- 尽可能使用服务器组件

成本考虑

无头商务改变您的成本结构：

|成本类别|传统主题 |无头（氢）| |--------------|--------------------|--------------------| |初始构建| 5,000 美元至 20,000 美元 | $20,000-$80,000+ | |托管|包含在 Shopify 计划中 |氧气（含）或外部氧气（50-500 美元/月）| |持续维护|低（主题更新）|中高（前端开发）| |应用程序替代品 |不适用 |每个应用程序所需的 API 替代方案 | |开发者要求 |液体/HTML/CSS | React、GraphQL、Node.js |

当性能提升、设计灵活性和多渠道功能能够带来可衡量的业务价值时，投资就是合理的。

Headless Shopify 入门

如果无头商务符合您的业务需求，请首先通过专业的 Shopify 咨询会议 评估您的要求。 ECOSIRE 的开发团队使用 Hydrogen、Next.js 和其他现代框架构建自定义 Shopify 店面。

我们还提供自定义 Shopify 应用开发 来替换无法在无头环境中运行的第三方应用。 联系我们的团队 讨论无头商务是否是适合您业务的架构。

要点

• 无头商务将您的前端与 Shopify 的后端分开，为您提供全面的设计和性能控制
• Hydrogen 是 Shopify 的官方无头框架，基于 Remix 和特定于商业的组件构建
• 性能优势是真实的：更快的 LCP、更低的 FID 以及更好的 Core Web Vitals 分数
• 无头显着增加了开发成本和复杂性——它并不适合每家商店
• 大多数 Shopify 应用程序不适用于无头店面，需要基于 API 的替代方案
• 分阶段迁移方法可降低风险并允许在每个阶段进行验证