Shopify Storefront API

Next.js action 调 Storefront 库存没更新

现象#

在 'use server' 的 action 里查 quantityAvailable,页面一直显示 10 件,后台已经改成 0;本地 dev 正常,部署到 Vercel 后必现。

原因#

  • Next.js 对 fetch 默认接入 Data Cache,POST 在部分版本也会被记住
  • route segment 被静态化,action 返回后页面没有重新验证
  • 私有令牌只放在服务端,但没带 Shopify-Storefront-Buyer-IP,所有请求被算作同一来源
  • 环境变量只在构建时注入,运行时读到空值,请求静默失败

处理步骤#

  1. 请求里显式写 fetch(url, { method: 'POST', cache: 'no-store', next: { revalidate: 0 } })
  2. 在 action 所在文件加 export const dynamic = 'force-dynamic'
  3. 写完后调用 revalidatePath('/products/[handle]') 或 revalidateTag
  4. 服务端从 headers() 取真实 IP,加到 Shopify-Storefront-Buyer-IP
  5. 在服务端日志打印状态码与 errors,确认不是 401 或 430 被吞掉

验收标准#

后台改库存后刷新 PDP 立即显示新值,action 日志里请求为 no-store 且响应无 errors。

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