Shopify 的氢气和氧气——您应该掌握的一切

去年，Shopify 推出了全新的无头框架 Hydrogen 和 Oxygen，表明了他们对无头商务的承诺。近一年后，随着 Shopify Editions 的推出，Hydrogen & Oxygen 正式推出。除此之外，还有一些增强功能和更新，必将吸引知名品牌和有进取心的电子商务管理员。为了省去您研究的麻烦，我们整理了迄今为止所有可用的细节、更新以及对无头商务的影响。那么，让我们深入研究一下……

已经熟悉的内容

氢

Hydrogen 在 Shopify Unite 2021 上亮相，代表了 Shopify 为开发人员提供更简单、更时尚、无头设置的解决方案，并为在 Shopify 商店中操作的客户提供令人兴奋的购物体验。Shopify 的这款新颖框架采用基于 React 的架构，支持定制店面，具有扩展的定制前景，可在不影响网站功能的情况下快速构建。

这对商家有何帮助？

以前，您的电子商务开发团队经常面临网站速度和设计精美的体验之间的两难境地。然而，随着 Hydrogen 融合了一系列技术，包括我们的合作伙伴：Nosto、Sanity、Contentful、Klaviyo、ReCharge、Okendo 和 Aloglia，他们为实现无与伦比的网站性能和生动的用户体验铺平了道路。

我们很高兴能与 Hydrogen 携手合作，为那些希望转向由 Shopify 和 Hydrogen 堆栈提供支持的无头解决方案的客户提供一流的体验和支持。我们在此协助商家大规模构建真实且相关的在线商务体验。

吉姆洛夫格伦
Nosto 首席执行官

利用氢气的优势：

• 初始模板。 借助 Hydrogen，开发团队可以使用入门套件，其中包含预先组装的演示商店，从而加快开发时间。
• 预先设计的组件。 Hydrogen 为开发人员提供了预先设计的组件，方便与 API 无缝交互。该框架还利用其默认的 tail-wind 提供了在整个站点中重复使用组件的能力。
• 服务器端渲染。 使您的网站能够根据优先级和用户的浏览操作逐步加载，而不是一次加载整个页面，从而显著提高网站速度**. 这是无头商务结构的优势，并不局限于 Hydrogen。**  
• 默认顺风. 允许在您网站的不同部分（例如博客页面）重复使用专用组件（例如 PDP），而无需更新 CSS 类。
• 为SEO 的胜利做准备。 Hydrogen 需要预先建立的 SEO 增强功能，例如自动生成的站点地图、所有页面的元数据值以及可适应的 robots.txt 文件。

可能的限制**：**

• 专为 Shopify API 量身定制。 Hydrogen 专为 Shopify API 量身定制。因此，其组件与 Shopify API 的不同部分紧密相关。此外，Hydrogen 只能用于构建 Shopify 店面，不支持移动应用程序等其他自定义店面。
• 面向开发人员的工作流程。 Hydrogen 框架充满了代码，这意味着一切都必须由您的开发团队或 Shopify Plus 组织编写和维护。您的非开发部门（例如营销或产品）将无法管理您网站的前端层。尽管如此，这种情况在任何无头设置中都很常见。或者，您可以与像我们这样的 Shopify Plus 组织合作，他们可以长期建立和管理您的 Hydrogen 商店或提高您内部团队的技能。 请随时与我们的团队联系以深入了解此事。
• 应用程序集成。 尽管 Shopify 的一些最受欢迎的应用程序已准备好与 Hydrogen 框架直接集成，并且 Sanity 和 Contentful 是其首选的 CMS（我们稍后会深入讨论这个问题），但如果您想要不兼容的 CMS 或应用程序，则需要使用中间件独立管理链接。

氧

简而言之，Oxygen 是一个 Shopify 托管平台，允许您直接在 Shopify Plus 上托管 Hydrogen 店面。我们对此表示赞同——通常，使用无头模式时，需要第三方平台来托管框架，但 Oxygen 消除了这种必要性。相反，您可以无缝同步 Shopify 的 Storefront API，传播多个不同的 Hydrogen 店面以供预览、共享、测试和实验。

关于它对 Shopify 商家的适应性？Oxygen 的设计旨在承受黑色星期五等重大事件的大量并发流量，而不会出现故障风险，并且在全球部署时，它可以提供出色的国际销售体验。

2022 年有什么新鲜事？

Shopify 于 2022 年 6 月正式推出了 Hydrogen，其中包含多项更新。以下是 Shopify 引入并集成到其 Hydrogen & Oxygen 框架中的所有新功能的全面概述：

CMS 青睐的合作者

作为其授权氢气和氧气发射的一部分， Shopify 已经与 CMS 工具 Sanity 合作并进行了投资。 Sanity 是一款完全可适应的 CMS 工具，开发人员和内容所有者都可以从头开始构思。为了此次合作，Sanity 的工作人员开发了一款针对 Shopify 的 Hydrogen & Oxygen 定制的内容应用程序工具。这使商家能够在 Shopify 上维护他们的产品、变体和系列，并将他们的前端与 Sanity CMS 协调一致。

我们很高兴地宣布，我们已与 Shopify 建立了战略合作伙伴关系，Shopify 已对 Sanity 进行了大规模投资。我们共同简化了无头产品之间的集成，为希望打造卓越体验的品牌创造了无与伦比的潜力。这证明了我们技术的进步以及内容对电子商务未来的战略重要性。我们是 Shopify 在内容平台上进行的唯一投资。

马格努斯·希勒斯塔德
Sanity.io 首席执行官兼联合创始人

Contentful 也被指定为首选 CMS 合作者。Contentful 是目前增长最快的 CMS 技术之一，因此毫不奇怪他们被选为 Hydrogen & Oxygen 初步版本的首选供应商。他们的 API 优先方法意味着品牌内容（无论是文章还是产品详细信息）都可以在您销售产品的任何地方传播，并实时准确地翻译和更新。将 Hydrogen & Oxygen 与 Contentful 等首选合作伙伴一起使用会产生

适合任何品牌的强大产品组合。

值得一提的是，替代 CMS 选项仍然可以集成到您的无头堆栈中。但是，目前需要自定义集成，与使用 Sanity 或 Contentful 相比，这可能会耗费更多时间。

Shopify API 中的更新

随着 Hydrogen 的炒作，Shopify 增强了其 API 以适应新框架。到目前为止，店面 API 不适用于服务器端应用程序。对于商家来说，这可能会导致达到速率限制，从而影响其网站的整体功能。此更新允许服务器代表商家发出请求而不会遇到限制，从而实现以前被认为有风险的服务器端操作。

集成应用程序

早在 2021 年，当 Shopify 首次推出 Hydrogen & Oxygen 时，人们就对应用程序集成感到担忧。Shopify 拥有一个庞大的应用程序商店，其中一些最受欢迎的应用程序是商家技术堆栈的重要组成部分。然而，如果没有这些应用程序的 API 集成，中间件似乎是唯一的选择。幸运的是，Shopify 现在已经披露了一份必不可少的技术堆栈组件列表，这些组件从一开始就准备好无缝集成到 Hydrogen 中，确保商家可以保留他们青睐的技术解决方案。

使用 Hydrogen & Recharge 增强客户的订阅体验。我们很高兴成为首款与 Shopify 为商家提供的无头产品兼容的订阅应用程序。我们共同为开发人员提供灵活性和自由度，以打造定制订阅服务。

瑞安福斯特
Recharge 欧洲、中东和非洲地区合作伙伴经理

Klaviyo 与超过 70% 个 Shopify Plus 品牌合作，认识到拥抱和支持新技术的必要性。这就是为什么我们很高兴成为 Hydrogen 发布的一部分，成为为数不多的准备好并致力于推出的合作伙伴之一。

迈克尔·沃斯利
Klaviyo 高级经理兼解决方案架构师

对电子商务未来的影响……

自去年 Hydrogen & Oxygen 宣布并正式推出以来，无头架构是电子商务的未来，这一点越来越明显，Shopify 引领了这一潮流。Shopify 一直致力于消除品牌障碍，Hydrogen & Oxygen 也不例外——此次发布将无头架构的覆盖范围扩大到更广泛的商家，而不仅仅是那些收入高、客户基础广泛的商家。对于品牌而言，采用无头架构（尤其是 Hydrogen 作为无头架构）提供了新的途径，可以快速适应不断变化的需求，从而提高转化率。对于客户而言，从他们最喜欢的商店获得更快、更丰富的体验正在成为标准。

Hydrogen 在与 Shopify 紧密集成的同时提供了许多无头优势，再加上 Shopify 最新的托管服务 Oxygen，您可以扩展到数百万用户，降低运营成本，并加快产品上市时间，而无需担心基础设施。

麦宜云
Shopify 工程师，Tenten

Hydrogen 还在 Web 技术的未来中扮演着至关重要的角色，因为它对 React 服务器组件的使用正在引导 React 的发展路线图。这一演变使开发人员和机构能够加强他们的实践，摆脱单片架构，通过提高性能和设计自由度来简化开发，并简化在线购物之旅的个性化。

不管你认为哪种无头框架“最合适”，很明显，Shopify 作为一家大型平台，投资并为其商家揭开这条无头之路，将直接影响品牌未来如何建设其电子商务平台。