Shopify CLI 与 Headless

Hydrogen 页面缓存怎么配才不会看到旧数据

现象#

改了商品价格,Hydrogen 站点几分钟内还是旧价格;或者设了 no-store 后 TTFB 明显变高。

原因#

  • Oxygen 按 Cache-Control 头做边缘缓存,默认策略较长
  • loader 里请求 Storefront API 未带 @inContext,缓存键缺少维度
  • 购买按钮等个性化内容被整页缓存

处理步骤#

  1. 列表与商品页设 Cache-Control: public, max-age=1, stale-while-revalidate=60
  2. 购物车、账户页设 private, no-store
  3. 个性化部分用 defer 或客户端取,不阻塞整页缓存
  4. 需要即时更新时用 webhook 触发 Oxygen 缓存失效

验收标准#

商品改价在 1 分钟内可见,缓存命中率仍保持较高,个性化内容不串用户。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。