Shopify Hydrogen 与 Oxygen 上线：商品、购物车和预览验收

Shopify Hydrogen与Oxygen项目先完成一条可验收的真实购物路径，再扩展视觉与功能。示例商品能打开不代表商店数据接入正确，构建成功也不代表Oxygen运行时和结账都通过。把商品、购物车、环境配置与发布结果分别核对。

先运行示例，再连接正确商店

按 Hydrogen与Oxygen入门文档创建项目；quickstart使用示例数据，不能据此确认真实商品已发布。连接实际商店和相应店面后同步环境配置，重新检查商品来源。以下命令展示当前官方入门流程，执行前应确认目标项目与登录的商店，Preview用于上线前验证。

npm create @shopify/hydrogen@latest -- --quickstart
# 进入生成的项目目录后，按所用项目脚本启动本地开发。
npx shopify hydrogen link
npx shopify hydrogen env pull
# 验收前在部署提示中选择 Preview 环境。
npx shopify hydrogen deploy

环境文件与会话配置不提交到公开仓库。检查所用凭据的用途和可公开边界，不把Admin或私有令牌放入浏览器代码；不同环境应分别确认。项目的构建与依赖要求按当前版本文档和配置核对，不沿用旧教程的运行环境假设。

把商品页面和购物车作为首个验收路径

Hydrogen与Oxygen基础说明指出当前Hydrogen项目基于React Router。在商品路由中核对来源、handle、选项、变体和可售状态；组件渲染出标题后，还要证明选择的变体与购物车行相符。若商品不存在，应有正确页面结果，不用示例数据掩盖真实缺失。

依据 Storefront API Cart参考使用购物车结果中的checkoutUrl进入对应结账。加入、修改和移除操作都检查返回错误与真实行结果；不能只因按钮点击有反馈就认为商店接受了更新。市场、语言和买家条件要贯穿商品查询与购物车，不假定框架自动完成所有翻译或币种配置。

区分页面速度与开发效率

性能观察记录网站速度每优化10%，用户跳出率降低7%；开发项目记录周期缩短40%。开发周期与访客加载是不同指标，需要分别记录。先检查关键商品内容何时可读、变体何时可选和购物车何时可用，再定位图片、客户端代码与数据请求，避免只看静态首页打开速度。

某Shopify Plus项目记录加载时间从2秒降至0.8秒、转化率提升18%，另有调优测试记录效率提升50%。对比要保持页面、设备、网络与测量任务一致，明确效率指的是哪个环节；框架与托管组合不能保证所有项目得到同样结果。

预览环境测试真实运行差异

根据 Oxygen运行时说明检查项目依赖：本地可用的Node API不一定在Oxygen提供。预览中复查环境变量、外部请求、错误处理、购物车会话及页面缓存。公开商品可缓存不代表个体购物车或客户状态也能共用缓存；先明确响应内容再决定缓存策略。

Oxygen部署说明提供每次部署的独立预览地址。保存代码版本、环境和验收结果，再批准生产发布；构建完成或自动部署开启都不能替代实际路径验收，更不能承诺零停机。预览共享范围应限于合适评审人，不随意公开带访问权限的链接。

上线前确认恢复版本仍能工作

Oxygen部署是包含当时环境配置的快照。恢复旧部署之前，确认旧配置和依赖仍可用；代码回退不会自动撤销商店已经发生的订单或其他业务变更。发布记录应说明何时停止推进、恢复哪个入口或版本、怎样保留现有业务记录。

最终验收至少贯通真实商品选择、购物车变更、结账入口、异常说明与环境恢复检查。A/B测试、更多市场和视觉扩展作为后续需求单独批准，避免在最小购物路径尚未闭合时先堆叠全球化功能。