从Liquid升级Hydrogen思考

type

status

date

slug

summary

一、Hydrogen的由来

在过去几年中，无头商务已成为流行的电子商务趋势，有望改变在线商务的运营方式。 Shopify 是当前领先的 SaaS 电子商务平台之一，它通过其最新技术 Shopify Hydrogen 将无头商务提升到了新的水平。

在本文中，我们将了解为什么 Shopify Hydrogen 将成为无头商务的游戏规则改变者，以及 Shopify 商家如何从这项最新的 Shopify 技术中获益匪浅。

1.1 Shopify Hydrogen之前的模式

无头商务是指在线商店前端与后端分离的基础设施。简单地理解，无头商务允许您将店面层（“头”）与电子商务平台本身分开（使其成为“无头”）。

但为什么我们要将网站前端与其平台分开呢？因为它为我们提供了最大的灵活性，可以轻松推动快速、流畅、一致和个性化的购物体验。

在传统架构中，店面和后端紧密连接，通常作为单个系统运行，这限制了我们的设计及其功能。同时，无头方法允许两个独立的层独立工作并通过 API 进行通信。因此，您完全有能力定制无缝且独特的购物体验，同时保持现有后端完好无损。

1.2 什么是Shopify Hydrogen?

Shopify Hydrogen 是一个基于 React 的框架，用于构建 Shopify 的自定义店面。它包括开发人员入门、快速构建和提供最佳个性化用户体验所需的所有结构、组件和工具。

通过利用 StorefrontAPI，始终可以使用 Shopify 作为电子商务平台来构建无头商店。然而，无头技术并非没有挑战。由于需要完成各种复杂的任务，通常成本更高、更耗时。此外，它需要更多的时间和精力进行维护，这对于经营小型且不断增长的业务的 Shopify 商家来说可能不是一个好方法。

shopify Hydrogen 是消除过去开发 Shopify 无头商店所伴随的所有这些复杂性和额外成本的完美解决方案。无需依赖第三方集成、外部系统或其他技术来自定义您的 Shopify 店面。 Shopify 希望 Hydrogen 能够提供“由 Shopify 平台和 API 提供支持的个性化和动态买家体验”。这就是为什么这项最新的 Shopify 技术被认为是无头开发的未来。

目前，Hydrogen 是完全开源的，您可以通过尝试并发送反馈以使其变得更好来帮助构建 Hydrogen。

二、Shopify Hydrogen工作原理

Hydrogen 包含一个快速启动环境，其中包含可供使用的特定于商业的组件和开发人员工具：

Hydrogen 框架

基于React, 有一个 Vite 插件，提供服务器端渲染（SSR）、水合中间件和客户端组件代码转换。

Hydrogen UI 组件

支持 Shopify 中已有功能和概念的组件、挂钩和实用程序，使用 Shopify的 React 组件库，如购物车、变体选择器、媒体库等关于 Hydrogen 的内容。 Hydrogen 平台确保所有这些组件与平台无缝集成。这可以为您节省大量时间。

Hydrogen 框架就像构建块一样，可让您在出色的商业体验和用户体验之间实现平衡。提供这些功能迫使 Hydrogen 充分利用 React 和 Vite 的潜力，并特别注意开发优化的组件和开发工具。

此外，Shopify 还包含一个入门模板，可让您在几分钟内启动店面，从而帮助您节省 Shopify 店面设计的脚手架和配置时间。由于此模板处理已与 Shopify 商店集成的项目的基本文件结构，因此您可以跳过设置并立即开始自定义店面。

2.1 Hydrogen的页面加载快

那么就必须先解决渲染引擎的性能问题。

边缘计算 Edge computing：渲染引擎在就近的边缘段节点做计算

流式服务端渲染 Streaming Server-side rendering：无需等待渲染完全完成，就让浏览器尽快接收到页面数据

对于那位在亚洲的 3G 网络手机端买家来说，

他访问页面的请求被就近的香港节点处理到，

取到数据，开始渲染，

不用等待渲染完成，就能流式返回渲染了一部分的页面。

在这样的渲染模式下，在全球任何一个地方的买家，都有可能在一秒内打开任何一个基于 Hydrogen 技术的 Shopify 店铺网站。

这个看上去很完美，但是一直无法实现的能力。通过 React.js 的 Streaming SSR 能力以及类似 Vercel 和 Netlify 这样提供边缘计算能力（edge computing）的平台，将会变成可能。

2.2 Hydrogen的开发效率快

搭载了 Vite.js 作为打包工具的 Hydrogen，底层是基于 ES Modules 的新一代 bundleless 编译器，只编译不打包，相比 bundle 模式要快 90% 以上。现在一眨眼的功夫，你改的样式就自动更新到浏览器上了，用起来非常之爽。

同时选用了具备 Streaming SSR 能力的 React.js 作为基础库，有着最庞大的前端社区生态，有大把现成的组件，帮开发者轻松实现任何一个酷炫的交互功能。

样式则用了最近非常火的 TailwindCSS，没有先入为主的预定样式，而是提供丰富的 utilities class 来帮你实现独一无二的设计样式，非常适合电商这个场景。

加上 Hydrogen 集成好的 Shopify API 组件库，让你只需要关注样式和功能，高速迭代。

最重要的是，这一套技术栈在现在的前端人才市场里，基本上每个开发者都会，不存在招人难的问题。

2.3 Hydrogen的全球部署快

新一代全球边缘计算部署平台 Oxygen（氧气），将在明年年初推出。

当代码推到仓库的那一刻，就开始在全球所有的边缘节点服务器部署新的代码变更，还支持分支预览，开发体验直接拉满！

说了那么多，来感受一下 Hydrogen 到底有多快吧！→ shopify.supply

三、Shopify Hydrogen对比Liquid

Liquid

一种用 Ruby 编写并由 Shopify 创建的模板语言。这是所有 Shopify 主题的支柱，用于在商店页面上加载动态内容。

Hydrogen

构建 Shopify 无头店面的框架。

尽管许多开发人员经常互换使用模板语言和框架，但两者之间实际上存在一些细微的差异,框架是用于创建应用程序的现成工具和组件的集合。同时，使用模板语言来构建结合了多个页面上相同的静态内容和从一个页面到下一个页面变化的动态内容的网页。模板专注于预定的功能，与框架相比，它的自定义选项较少。

可以这样想：模板就像数字绘画，而框架更像是乐高积木。

在 Shopify 的情况下，借助模板语言，可以重用定义网页布局的静态元素，同时将数据从 Shopify 商店动态迁移到页面。将 Liquid 与其他模板语言（例如 HTML、CSS、JavaScript）相结合，您可以构建和自定义 Shopify 主题。

Hydrogen 包括构建自定义 Shopify 店面所需的所有结构、组件和工具。凭借其框架和 UI 组件，Hydrogen 可以帮助您构建可以提供最佳用户体验的自定义店面。

由于 Liquid 需要静态和非静态元素来构建主题，因此可以看出 Liquid 对店面定制和性能造成了一些限制。另外，使用 Liquid 创建和自定义主题非常耗时。因此，Hydrogen 成为基于 Shopify 的店面的下一代解决方案，因为它为构建独特的网站 UX 和 UI 提供了无限的可能性。预计在 Shopify 店面开发中，Hydrogen 将取代 Liquid。

目前Liquid和Hydrogen都在GitHub上完全开源，供大家下载试用。

四、迁移思考

当您考虑迁移或在 Hydrogen 上推出新店面时，如果您的企业正在考虑从 Liquid 升级到 Hydrogen，我们的开发团队需要考虑 4 件事。

总的来说，我们非常看好Hydrogen的潜力。与 Oxygen（Oxygen 是基础设施投资的一部分，为 Oxygen 提供 100 多个区域服务器位置，使用 Oxygen 托管 Shopify 托管 Hydrogen 店面 Shopify. 可在全球范围内部署。因此，您的网站以毫秒为单位加载。）结合使用，就不再需要第三方托管服务，因为 Shopify 将通过 Oxygen 本地托管 React。

这是一种强大的无头商务新方法，应考虑以下几点：

1、更大的功能和能力通常会带来更多的复杂性。大多数与任何前端功能交互的应用程序都无法与开箱即用的 Hydrogen 一起使用，因此任何店面应用程序都必须优先拥有 API 端点，以便按预期集成和运行。

2、在 React 堆栈上运行店面渠道为品牌提供了一套新的工具集来优化数据源。其结果是网站性能更高（速度更快且可扩展），同时也有利于 SEO，开辟新的发现途径并实现更丰富的用户体验。

3、React 是一个开源前端 JavaScript 库，允许开发人员创建可以重新填充数据的大型 Web 应用程序，而无需重新加载页面。它提供了一个快速且可扩展的现代框架，将开发工作整合到可识别的模式中，并致力于简化人员配置挑战。使用React框架，前端开发人员可以创建一个将多个后端缝合在一起的表示层，而无需学习底层技术。

如前所述，Hydrogen 解决方案是一种参考架构，有助于更好地发现产品。但它不会扩展到结帐。结账需要作为项目的一个单独部分来解决。

展望未来，随着 Shopify 推出改进的 API，Hydrogen 与 Oxygen 分布式解决方案将为采用无头前端商务解决方案的品牌提供非常有吸引力的产品。