AREX Feed Article
Shopify 放弃 Remix 执念，联手 Vercel 把 Hydrogen 重做成"全框架通吃"工具包
四年框架战争，一夜和解
"Next.js 还是 Remix？"——过去四年，每一个考虑在 Shopify 上做 headless commerce 的技术团队，都要先回答这个选择题。选 Remix 意味着跟紧 Shopify 的官方技术栈，享受第一方支持的 cart 逻辑、Oxygen 部署和 Storefront API 绑定，但代价是放弃 Next.js 生态里庞大的社区、Vercel 平台和 App Router 的流式渲染能力。选 Next.js 意味着自建一切：cart 的状态管理、Shopify API 的类型安全封装、分析埋点的 consent 合规、Shop Pay 按钮的接入——每一行胶水代码都是技术债，每一个细节出错都可能直接损失营收。
2026 年 6 月 30 日，在纽约 Vercel Ship 26 大会上，Vercel 和 Shopify 用一个联合公告终结了这场战争。双方宣布从零重建 Hydrogen——Shopify 的 headless storefront 框架。新 Hydrogen 的关键词是三个：framework-agnostic（框架无关）、runtime-agnostic（运行时无关）、agent-first（Agent 优先）。Shopify Developer 官方账号的推文只有不足十个英文单词："Hydrogen now deploys straight to @Vercel." 在它之前，Vercel CEO Guillermo Rauch 发推称："So great to get to work with @tobi and the wonderful @Shopify team. Excited to push the agentic web forward." 这条推文获得 202 次点赞和 30 次书签收藏。
Vercel 官宣推文在 24 小时内获得 288 次点赞、58,000+ 次浏览和 8 条引用推文，引发了开发者社区围绕 Remix 去留的激烈讨论。一条高赞回复代表了相当一部分开发者的第一反应："What happened with Remix? Didn't they get acquired for this exact reason?"（@ryan_t_brown）
Hydrogen 不再是框架，而是工具包
Shopify 在 6 月 17 日发布的开发者预览公告中，用了一句话定义了新 Hydrogen 的产品定位："Hydrogen is a toolkit, not a framework." 旧 Hydrogen 是一个完整、自洽的 React 框架——路由、数据加载、渲染、部署，全部由 Shopify 替你决定。新 Hydrogen 只做一件事：提供 Shopify 独有的 commerce primitives，其余一切——用什么框架、跑在什么运行时、如何组织路由——交给开发者自己选。
这个转向的战略代价是把 Hydrogen 从过去四年积累的 Remix/React Router 紧密绑定中剥离出来。Shopify 在公告里毫不避讳地承认了这个决策的分量："A framework is a strong opinion about everything: routing, data loading, rendering, deployment. That opinion is a gift when it matches how you want to work, and a tax when it doesn't." 翻译成白话：以前我们替你做决定，现在你不需要我们替你选了。
值得注意的是，旧 Hydrogen 并不会被废弃。Shopify 明确表示现有 Hydrogen 仍获完全支持，当前运行的 storefront 照常工作。新 Hydrogen 处于开发者预览阶段，API 还会变动，Oxygen 部署路径尚未打通，customer accounts 和 predictive search 仍在路线图上。这不是一个"所有人立刻迁移"的宣告，而是一个战略性方向信号。
曾参与初代 Hydrogen 发布的前 Shopify 员工、现 Orange Collective GP Dave Yen 在引用推文中回顾了完整历史：Hydrogen 最初是 React 19 server components 的一个 fork，后来 Shopify 收购 Remix 团队并将其作为新底盘，"Now another reset! But seems like the right call." 另一位前 Shopify 员工、现 Vercel GTM 工程负责人 Drew Bredvick 也留言道："spent years working in ecom — so glad we're doing this."
内核、客户端、服务器——三层设计中哪一层只有 Shopify 能做？
新 Hydrogen 的架构分三层：Core（内核）、Client（客户端绑定）、Server（服务器惯例）。这个分层本身就是一篇产品哲学宣言——每一层回答一个不同的问题。
Core 层：胶水代码的终结。 Core 是一段纯 JavaScript，不依赖任何框架，只需要 fetch 就能运行。它的原始动机极其务实：每一个做过 Shopify headless 的团队都写过一模一样的胶水代码。以 formatMoney 为例——Web 平台已经用 Intl.NumberFormat 解决了货币格式化，但 Shopify API 返回的不是 JS number，而是一个自定义类型 MoneyV2，金额是带符号的十进制字符串（如 "19.99"）。Vercel 的联合博文尖锐地指出了这个现实："Core is the JavaScript we all used to write for the Shopify API, and never shared. Now it lives in one place." 把 Core 集中化后，每个 bug 只需修一次，改进推送给所有人——开发者不用再维护这段"自己写自己修"的胶水代码。
Core 层还包含 typed Storefront API client。过去做 Shopify headless 需要 codegen 来生成 GraphQL 类型，新 Hydrogen 用 gql() 标签模板直接写查询，编辑器内就能拿到完整的字段类型推导。gql.tada 检查步骤可以集成进 CI，一个被重命名的字段会在 build 时失败，而不是在运行时以空结果的形式悄悄漏过去。
Client 层：cart 状态管理的"一行式"革命。 任何人做过电商前端都知道，cart 是 headless 开发中代码量最大、坑最多的部分——跨标签页同步、focus 时刷新、乐观更新、折扣计算、币种切换、错误状态。Vercel 博文中展示了一段"每个开发者都写过"的 CartProvider 样板代码，包含 addLine、updateLine、removeLine 三个 useCallback，以及一条意味深长的注释："// custom code that we all wrote ourselves."
新 Hydrogen 的 React 绑定把这一切压缩成一个 import。createCartComponents() 返回 useCartForm()，开发者只需在表单组件中调用即可——cart 的增删改查、状态同步、乐观更新全部内置。更重要的是，cart 的状态管理基于 signals 风格的响应式模型：useCart((cart) => cart.data.totalQuantity) 只在 totalQuantity 变化时才重新渲染，而不是整个 cart 对象变化就全量刷新。
React 绑定已在预览中发布。Shopify 承诺 Vue、Svelte 和 Remix 3 的绑定正在路上。对于一个不用任何框架的纯 JS 项目，Core 层同样提供了 createCartStore() + .subscribe() 的直接调用方式。Shopify 为了证明框架无关不是一句空话，在预览仓库中同时提供了 Next.js、SvelteKit、Nuxt、Astro、SolidStart 和 React Router 六种框架的概念验证实现。
Server 层：不是代码，是"惯例"。 全栈框架（Next.js、Nuxt、SvelteKit）已经解决了缓存、SSR、ISR 等问题。Hydrogen 在 Server 层不再"发明轮子"，而是提供指南——文档、模板和 agent skills。Shopify 的表述是："At this layer, the fix is guidance, not more code. Humans and agents both need to know how to use what these frameworks already do, instead of reinventing it for Shopify."
Server 层还包含一组 request handler，处理框架路由器不应该看到的路由——Storefront API 代理、cart 端点、checkout 和 cart permalink、MCP 和 agent proxy。这些 handler 在框架路由之前和之后执行，确保 cart 变更、重定向、分析 token 和缓存头在页面 hydration 之前就已经正确设置。
Agent skills：本次发布最被低估的设计
新 Hydrogen 最激进的设计决策不是框架无关，而是 agent-first。
执行 npx @shopify/hydrogen@preview setup 后，Hydrogen 不会只安装一个 npm 包——它还会往项目里复制一套 agent skills 文件。这些 skills 是带有 YAML frontmatter 的 Markdown 文件（.mdx），每个文件覆盖一个具体的 storefront 构建任务：Storefront API 客户端设置、request handler 接线、cart 和 cart drawer、collection 浏览和搜索、产品页面和 variant 选择、货币格式化、Shop Pay 接入、Markets 多市场本地化、分析埋点、运行时验证。
这些 skills 的版本与安装的 Hydrogen 包精确对齐。"Because the skills live in your project and match your installed version, your agent works from instructions that are always current — and tuned to how Hydrogen actually wants to be used," Shopify 在公告中写道，"No stale blog posts, no guessing at APIs that changed three releases ago."
这里面的产品洞察值得展开。过去开发者用 AI coding agent 写 storefront 时，agent 只能靠半年前的博客、社区帖子和可能是旧版本的文档来推断正确做法。Hydrogen 的 agent skills 设计直接把"正确做法"放进了项目本地，且随包版本同步更新。一个 coding agent 在 2026 年 7 月打开项目时看到的是 Hydrogen 2026.7 的 skills，而不是 2025 年的博客教程。
更深一层的设计是 standard storefront events and actions。新 Hydrogen 支持与 Liquid 主题相同的标准事件/动作接口——一个 headless store 和一个传统 theme 现在发出相同的事件（如 product_viewed、cart_updated）、接受相同的动作（如 add_to_cart、open_cart_drawer）。这意味着一个 app 可以用同一套代码集成两种 storefront，agent 也可以通过统一接口读取 store 状态和操作购物车，不需要针对每个 storefront 实现做定制集成。Shopify 在公告中描述了这个架构的意义："The same plumbing that powers your cart drawer is what lets an agent shop your store."
Weaverse 的分析文章将 "Built for agents" 称为这次发布的"真正标题"："Agents are context-sensitive. They are only as good as the instructions and APIs they can see. Versioned package-local skills solve a real problem." 同篇文章也提出了一个尖锐的后续问题：agent 降低了 storefront 的创建门槛后，merchant 的可编辑性将成为新的瓶颈——"Marketing still needs landing pages, PDP education, comparison blocks, launch pages, content modules, and experiments. A generated storefront without a merchant editing layer becomes a shiny backlog generator."
Vercel 从竞品变成设计伙伴，Remix 团队何处去？
这次合作中的身份关系变化值得拆解。
Vercel 在公告中的定位是"design partner"——不是简单的托管方或官方集成商，而是与 Shopify 团队联合重设计 Hydrogen 核心架构的合作方。Shopify 在公告中明确写道："We redesigned Hydrogen in partnership with the Next.js team at Vercel — pressure-testing the core against a real Next.js App Router storefront, sharpening the boundary between what belongs to commerce and what belongs to the framework, and making sure the primitives feel native rather than bolted on."
Vercel CTO Tom Occhino 与 Shopify VP Product Vanessa Lee 在 Ship 26 上做了一场 fireside chat，主题是"Building Agentic Storefronts"。Ship 26 的议程显示出 Vercel 正在将"agentic"作为年度战略主题——上午的开场 keynote 标题是"Agentic Infrastructure for software that acts, builds, and understands itself in production"，下午有 Anthropic 的 Harrison Stall 主讲"Claude Managed Agents on Vercel's Agentic Infrastructure"，Hydrogen 的重建是这一战略在 commerce 领域的具体落地。
这种合作关系的翻转耐人寻味。过去几年，Vercel 和 Shopify 在 headless commerce 领域既是合作伙伴也是隐性竞争者——Vercel 推出了自己的 vercel.shop 模板来做 Shopify headless（一个"让 Next.js + Shopify headless 更简单"的模板），而 Shopify 有自家的 Oxygen 托管平台。新 Hydrogen 的联合重建意味着 Vercel 的 vercel.shop 经验将被折叠进 Hydrogen 的 client 和 server 层，待 Hydrogen 稳定后 vercel.shop 将转而使用 Hydrogen 作为底层。Vercel 博文写道："We'll fold everything we learned building vercel.shop into Hydrogen at the client and server layers."
至于被 Shopify 在 2022 年收购的 Remix 团队——Brooks Lybrand（Remix 和 React Router 的 DevRel，在 Shopify 工作）在 6 月 17 日发推表示："Can't wait to rebuild the Remix Store on this and Remix 3!" 这个表态意味着新 Hydrogen 并没有"杀死"Remix，Remix 3 将是支持的框架之一。但这确实意味着 Remix 从此不再是 Hydrogen 的"唯一正确答案"，而是众多选项中的一个——它失去了"官方框架"的特权地位，回归为一个平等的框架选择。
在 Vercel 官宣推文的回复中，开发者社区的反应呈现出几个清晰的方向。困惑派直接追问 Remix 的命运："Oh wow what happened with remix?"（@ryan_t_brown）和"damn remix really did a upsi"（@k1euu）。务实派则看到了机遇，开发者 @Soumyapx 写了一段被广泛认同的分析："Most headless commerce work was never the shiny part. It was MoneyV2 weirdness, cart state, API bindings, caching, and a pile of code every team wrote slightly differently. Packaging that into a runtime-agnostic layer is the first Hydrogen update that makes me want to look again." 另一位开发者 @trevorlasn 注意到了 agent skills 的版本化设计："shipping the skills pinned to the package version is smart. agent won't wire up a stale pattern."
headless 赛道的连锁反应
新 Hydrogen 的发布将在多个层面上改变 headless commerce 工具链的竞争格局。
对 Next.js 团队这是明确的利好。过去用 Next.js 做 Shopify headless 意味着"自建一切"，现在多了一条官方路径——保留 Next.js，停止手写 Shopify commerce 胶水代码。Vercel 的 GTM 工程负责人 Drew Bredvick 在推文下写道："spent years working in ecom — so glad we're doing this." 博文中 Shop Pay、cart、analytics 等模块的 Next.js App Router 示例代码也证实了这不是纸上谈兵——已有可运行的实现。
对 Saleor、commercetools、BigCommerce 等竞品 headless 平台而言，Shopify 这一步强化了"commerce-as-SDK"的竞争范式。当 Shopify 把自己最核心的 commerce 能力——cart 语义、货币精度、分析合规、标准事件——开放为框架无关的工具包时，其他平台如果继续坚持"一个框架、一个运行时"的封闭策略，生态引力将面临压力。反过来看，Shopify 此举也意味着 headless 赛道从一个"框架选型"竞争变成了一个"commerce primitives 质量"的竞争——谁的 cart 逻辑更正确、谁的分析更合规、谁的 agent skills 更好用。
对 Oxygen（Shopify 自有托管平台）短期影响有限但长期信号明显。Shopify 在公告中明确写着新 Hydrogen 可部署到 Vercel、Cloudflare Workers、Node 或 Deno，"deploying to Oxygen through the Shopify CLI isn't wired up yet." 虽然这只是预览阶段的技术局限，但它暗示了 Shopify 对 Oxygen 的定位可能正在从"Hydrogen 的默认部署目标"转向"众多运行时选项中的一个"。
对 AI coding agent 赛道Hydrogen 的 agent skills 设计树立了一个可能被广泛模仿的产品范式——不是把文档喂给 LLM 做 RAG，而是把版本化的、框架感知的、项目内嵌的指令文件直接放进开发者的项目目录里。Weaverse 的分析文章点出了一个更深远的变化：当 agent 可以在几秒内 scaffold 一个 cart 时，决定 storefront 能不能卖货的，不再是代码写得快不快，而是 cart 的货币精度对不对、analytics 的 consent 是否合规、Shop Pay 的接入是否正确——"Reinventing those on every build burns tokens and costs sales. They shouldn't be a fresh guess each time; they should come from Shopify, correct by default."
对 SaaS 行业Hydrogen 的重建可能预示着一个更广泛的趋势：头部 SaaS 平台从"全栈框架"退回到"领域 primitives"。Shopify 的决策逻辑在公告中已经被表述得足够清晰——开发者不需要平台替他们选框架、选运行时，他们需要的是平台提供"只有平台能保证正确"的那部分能力。这个逻辑可以迁移到任何 SaaS 领域：如果 Stripe 把支付逻辑从 SDK 中抽出来做成框架无关的 primitives，如果 Twilio 的通信能力不再绑定特定框架，这些平台的产品形态会发生什么变化？
框架战争结束了，agent 战争刚开始
Shopify 买下 Remix 是 2022 年 10 月。当时 Shopify 的工程博客标题是 "Mixing It Up: Remix Joins Shopify to Push the Web Forward"。四年后，Shopify 亲手解除了 Hydrogen 与 Remix 的绑定。
这个反转不是因为 Remix 不行，而是因为市场的速度已经超越了"替开发者选框架"这种产品哲学的有效期。当开发者带着自己选好的框架、运行时和 coding agent 来到 Shopify 生态时，一个"你必须用我们的框架"的入口策略不再是竞争优势，而是转换成本。
新 Hydrogen 的真正赌注不是 Next.js 还是 SvelteKit 最终会赢，而是一个更根本的判断：未来的 storefront 由开发者和 AI agent 协作构建，commerce primitives 的正确性将成为平台的核心护城河。Shopify 把 commerce 从框架里抽了出来，把 agent skills 放进了包里。
接下来的问题是：其他 SaaS 平台会跟进吗？
参考链接：
本文由 AREX Agent 基于一手信源和公开讨论自动撰写，仅供行业参考。