这篇来自最新一期的 React Status 头条文章：「🔗Meet Hydrogen: A React Framework For Dynamic, Contextual And Personalized E-Commerce」，我本身因为在做电商相关的业务，看到之后就很感兴趣，想着翻译一下。原文文法极为琐碎难读，而且涉及到大量类似 Core Web Vitals 这种晦涩的外网前端圈术语...总之一言难尽。
另外，这篇文章属于前瞻性质的论述，用到的大量React概念都非常超前，不属于目前React稳定支持的特性。
前言
摘要：什么是最好的电商站点体验呢？肯定不是一个数字，不是一系列 Web 性能指标的堆积，虽然这些都极为重要。极致的电商体验是一个三重困境的需求平衡：良好的客户体验、动态的店面功能和长期业务目标（转换、保留、重新参与）。
作为开发人员，我们理所当然地关注用户的体验，不遗余力地挤出关键渲染过程中的每一毫秒，优化输入延迟，消除网页抖动（jank）。在追求极致的场景下，静态站点生成（SSG）、边缘交付（edge delivered）和优化HTML首屏渲染似乎是最佳策略。最后你会意识到一个事实，提高转换率和实现业务目标的下一个关键需求是提供高度定制化Web店面的能力。
这个过程从实现简单的本地化策略（译注：大概意思是让商家定制页面的一些部分）开始，然而，这会快速地过渡到
- 处理有关联的定价问题
- 大量且频繁的产品目录更新
- 管理连续的多变量情况下的产品测试和促销活动
- 以及提供为用户定制的动态推荐服务。
最后，你也会意识到，每个页面都类似于一个俄罗斯方块游戏，其中每个“插槽”都可以而且应该由访问者的偏好动态定制，所有这些都会被长期增长和变化的商业规则影响。
Hydrogen就是用来支持动态电商构建的
我（原文作者）在 Shopify 工作，这是一个集创业、运营和发展为一体的电商平台。我们与数以百万计的商家合作，与许多公司一样，我们沉迷于（提升）店面的表现能力。
我们更关注在性能、功能和商家的业务目标之间找到最佳的平衡。我们从所有卖家身上学到的一个关键洞悉是，电商的核心需要是动态的。
从后端到前端的A/B测试和对每个客户的动态个性化，其中前后端共用的基建模式是快速的SSR（服务器端渲染），这个能力可以支持极致的店面访问速度。在这个基础之上，我们添加了缓存层、预编码层和边缘交付优化层（而不是可能会起相反作用的中间层）。
我们调查了现有的可用开发工具和运行时，和预期有所差距。实现动态电商需要服务端和客户端之间的紧密集成、优化的流媒体和数据获取策略，以及大规模可运行的生产平台。
这些都是 Shopify 想要参与帮助解决的技术难题，这就是为什么我们一直在努力研究 Hydrogen framework 的原因。它是一个基于React的框架，针对电商业务进行了优化，并专门由Shopify API和基础架构提供支持：
Meet Hydrogen：一个基于React的框架，用于构建定制和创意店面，为您提供快速启动、快速构建和提供最佳个性化动态客户体验所需的一切，这些体验由Shopify平台和API提供支持。
电商的未来是动态的和个性化的。在Shopify，我们相信，无论购物者位于何处，在没有静态站点生成限制的情况下，这样的购物体验都会很快。与一套 Shopify 优化的商务组件和一个 Vite 驱动的开发环境相结合，它是开发人员和客户的快速框架。
Hydrogen 能通过整合React服务器组件、流式服务器端渲染和智能缓存控件来推动动态电商。
现在，我们将发布公共的开发者预览：深入文档，在Stackblitz上启动一个测试实例，你可以在GitHub上发表反馈和评论。
通过流式服务器端渲染（streaming server-side rendering）、高效的组件级别的更新和状态转换，获得快速的首次渲染，同时为所有静态资源设置性能加载和捆绑策略，这是一项艰巨而耗时的技术工作。而且，这个结果（即产出的这个框架）需要天衣无缝和让人心情愉悦的——我们敢说，甚至是有趣的——才能让人去开发和维护。
无论您是为新商户开设店面，还是为数百万人打造客户体验，Hydrogen 的目标都是消除无差别、粗糙的技术管道，让您能够快速起步，专注于提供商户价值。
例如，Hydrogen 解决的几个关键问题，
- Streaming server-side rendering 由 React Suspense 支持的极速首次渲染
- React Server Components 快速高效的组件级别的状态更新和二次渲染
- Efficient server and client data fetching 原生的缓存
- Flexible page and subrequest caching controls 动态边缘交付
解锁这些特性并使它们能够很好地协同工作需要我们与React核心团队携手合作，帮助定义和原型化React服务器端组件；服务器端流媒体上的Vite生态；Google的Aurora团队致力于整合一致性和CLI工具，使您能够掌握现代最佳实践。
“谷歌的Chrome团队很高兴看到Shopify继续大规模地提高网络性能。通过我们的合作，提高性能，如智能图像优化，我们相信有可能实现一个优秀的用户体验，使Shopify的商家及其客户受益。”
— Addy Osmani, Chrome Engineering Manager
当然，Hydrogen还附带了一套预构建和优化的组件，这些组件知道如何与Shopify Storefront API对话，并允许您专注于演示（差异化的商家价值）。
好奇到想要尝试了? 我们有一个开发者预览版本 shopify.dev/custom-stor…. 来试一试吧, 让我们知道 你的想法！
通过Oxygen来支持的Hydrogen
任何经验丰富的团队都会知道，建立店面功能是一回事，而以能够吸收大量流量的生产规模运行店面功能（由大促或突破性社交活动驱动）是另一个巨大的运营挑战。
它运行得很快，我的机器上没有任何错误[…]”
—— 每个开发者都这样说...
这就是 Oxygen 发挥作用的地方。Oxygen是一个新的Shopify托管的、基于V8引擎的JavaScript worker运行时。它利用了我们十多年来开发的所有平台、操作和安全知识功能，扩展了数百万个店面。我们现有的商家永远不必考虑为创纪录的大促扩展基础设施的复杂性，Hydrogen 店面也不必考虑。
在引擎之下，Oxygen运行时在地理广泛分布的集群上运行，这些集群的共享Shopify数据在几毫秒之外；快速数据访问是实现快速动态电商的关键，数据和渲染的共享是我们（并非秘密）的武器。Shopify的CDN增加了优化的边缘交付，具有针对恶意参与者和购物机器人的专门商业保护功能，现在这些恶意参与者和购物机器人的操作规模通常能够对多个店面进行DDoS攻击。
Oxygen正在与选定的商家进行早期访问预览。请继续关注2022年的更多信息！
Hydrogen 和 Oxygen 是现代电商的基石
再一次的，我们的经验表明，电商是动态的、关联的和个性化的，这并不意味着我们不能从边缘缓存获取数据。动态的静态的，你两者都需要。
我们对 Hydrogen 和 Oxygen 的愿景是，充分发挥这两个基建的优势，让建设和运营下百万个动态、情境化和个性化的现代店面变得更容易、更经济、更有趣。
附：
Hydrogen 的Github仓库：github.com/Shopify/hyd…
