2026年无头Shopify开发指南：Hydrogen、Next.js及更多
我在过去六年里建立了400多个无头Shopify店铺。其中一些在数月内达到100万美元ARR。另一些则成为了需要花费数个季度才能理清的重建灾难。这些结果之间的差异几乎从不归结于你选择的框架——而是归结于在写第一行代码之前理解权衡。
本指南包含了我希望在2020年建立第一个无头Shopify店铺时能得到的一切——当时我用拼凑的Next.js设置和旧的REST API。它是为DTC品牌、B2B批发商和企业Shopify Plus商户建立店铺所获得的知识精华。其中一些会确认你已经怀疑的东西。其中一些会挑战你在Twitter上看到的常规智慧。
让我们开始吧。
目录
- 2026年无头Shopify的真实含义
- Storefront API：你的新好朋友
- Hydrogen vs Next.js Commerce：真实对比
- 实现亚1秒LCP
- 结账扩展和后Checkout.liquid时代
- Shopify Plus迁移策略
- 100万美元ARR阈值：无头何时在财务上有意义
- 选择代理商：Naturaily、Aalpha及其他
- 使用Astro和其他框架的自定义店铺
- 常见问题
2026年无头Shopify的真实含义
无头Shopify意味着将前端展现层与Shopify后端解耦。你保留Shopify真正擅长的——库存、订单、支付、履行——并用与Storefront API通信的自定义前端替换Liquid主题。
但这里有件大多数文章不会告诉你的事情：2026年的无头Shopify与仅仅两年前的情况完全不同。三个转变从根本上改变了格局：
Hydrogen 2已成熟。 Shopify基于React的框架运行在Oxygen（他们的托管平台）上，自从2023年风险四伏的发布以来已大幅稳定。现在在底层使用Remix，并附带合理的默认值。
Storefront API达到2025-04版本。 这引入了Customer Account API v2、预测搜索改进，以及——至关重要的——不需要客户端JavaScript的服务器端购物车操作。
结账扩展完全取代了checkout.liquid。 截至2025年8月，所有Shopify Plus店铺必须使用结账扩展性。不再有Liquid结账自定义。仅这一点就促使数千家店铺转向无头架构。
我使用的心智模型：Shopify是你的商务引擎。你的前端是一个恰好从该引擎获取数据的目的构建的界面。其间的一切都是API调用和缓存策略。
架构栈
2026年典型的无头Shopify设置看起来像这样：
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Frontend App │────▶│ Storefront API │────▶│ Shopify Backend │
│ (Hydrogen/Next) │ │ (GraphQL) │ │ (Admin, Orders) │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ Headless CMS │ │ Checkout Ext. │
│ (Sanity/Contentful) │ (Shopify UI Ext)│
└─────────────────┘ └─────────────────┘
前端通过GraphQL与Storefront API通信。不属于Shopify的内容（编辑页面、登陆页面、复杂的内容模型）位于无头CMS。结账自定义通过Shopify的扩展点进行，而不是自定义标记。
Storefront API：你的新好朋友
Storefront API是专为面向客户体验设计的公开GraphQL API。它不同于处理后端操作的Admin API。理解这个区别至关重要。
你能做什么
query ProductPage($handle: String!) {
product(handle: $handle) {
id
title
description
priceRange {
minVariantPrice {
amount
currencyCode
}
}
variants(first: 100) {
edges {
node {
id
title
availableForSale
selectedOptions {
name
value
}
price {
amount
currencyCode
}
}
}
}
metafields(identifiers: [
{ namespace: "custom", key: "sizing_guide" },
{ namespace: "custom", key: "material_info" }
]) {
key
value
type
}
media(first: 20) {
edges {
node {
... on MediaImage {
image {
url
altText
width
height
}
}
... on Video {
sources {
url
mimeType
}
}
}
}
}
}
}
速率限制和缓存
截至2026年，Storefront API允许每个店铺的公开访问令牌每秒100个请求（2024年初上升自60）。私有访问令牌获得更高限制。但你根本不应该达到这些限制——如果你达到了，说明你的缓存策略有问题。
这是我在每个项目中所做的：
- 完整页面缓存在CDN级别（Vercel、Cloudflare或Oxygen）使用
stale-while-revalidate头 - 数据层缓存产品数据60秒TTL，收藏数据300秒
- 购物车操作从不缓存——每次都直接命中API
- 库存检查使用轻量级轮询机制或webhooks使陈旧库存数据失效
// 示例：Next.js中产品查询的缓存策略
export async function getProduct(handle: string) {
const data = await shopifyFetch({
query: PRODUCT_QUERY,
variables: { handle },
cache: 'force-cache',
next: { revalidate: 60, tags: [`product-${handle}`] },
});
return data.product;
}
Hydrogen vs Next.js Commerce：真实对比
这是我被问得最多的问题。诚实的答案是：取决于你的团队、你的时间表和你的托管偏好。但这是数据。
| 因素 | Hydrogen 2 (Remix/Oxygen) | Next.js Commerce (Vercel) |
|---|---|---|
| 框架 | Remix (React) | Next.js 15 (React) |
| 托管 | Oxygen (Shopify)或自行托管 | Vercel、Netlify、自行托管 |
| Shopify集成 | 第一方、深度 | 社区维护的启动器 |
| 学习曲线 | 中等（Remix模式） | 低（如果团队知道Next.js） |
| CMS灵活性 | 良好但以Shopify为中心 | 优秀——生态系统庞大 |
| 中位LCP（我们的数据） | 0.8s | 0.7s |
| 中位TTFB | 120ms (Oxygen) | 90ms (Vercel Edge) |
| 大规模成本 | Oxygen免费层慷慨 | Vercel Pro $20/月，企业$$$ |
| 结账集成 | 本机购物车→结账流程 | 需要Storefront API购物车设置 |
| 生态系统插件 | 增长中，约200个包 | 巨大，10k+个包 |
| 社区规模 | 约15k GitHub星 | 约40k GitHub星 |
何时选择Hydrogen
选择Hydrogen如果：
- 你的团队熟悉Remix的loader/action模式
- 你想要最接近原生Shopify的体验
- 你是想要包含Oxygen托管的Shopify Plus商户
- 你不需要大量非商务内容（博客、编辑等）
何时选择Next.js
选择Next.js如果：
- 你的团队已经发布Next.js应用
- 你需要超越Shopify元字段的深度CMS集成
- 你想要最大的托管灵活性
- 你正在在商务旁边构建内容丰富的品牌体验
- 你计划在未来可能切换商务后端
我会直言：在过去一年里我建立的70%的店铺中，Next.js是正确的选择。不是因为它在技术上优越——它不一定优越——而是因为人才库大5倍，生态系统对边缘情况有更多解决方案。当你的客户营销团队想要特定的动画库或他们的SEO机构需要特定的元标签结构时，你在Next.js领域会更快地找到答案。
也就是说，Oxygen上的Hydrogen店铺有一种难以匹敌的部署简洁性。推送到main，它就上线了。没有构建配置，没有边缘功能冷启动要调试。
实现亚1秒LCP
这是橡胶与道路接触的地方。整个无头Shopify的商业案例——实际的财务理由——都基于性能。而你需要达到的数字是移动设备上亚1秒的最大内容绘制。
原因如下：根据Shopify自己的2025年性能研究，LCP每改进100毫秒对应大约1%的转化率提升。一家年收入500万美元的店铺从2.5秒LCP（典型的Liquid主题）转到0.9秒LCP大约可以期待15%的提升。那是额外的75万美元收入。
我们跨400多个站点的数据确认了这个范围。无头店铺平均比Liquid主题快60-75%，由CrUX报告中真实用户Core Web Vitals数据测量。
性能剧本
这正是我们如何持续实现亚1秒LCP的：
1. 服务器渲染关键路径
// Next.js App Router——产品页面的服务器组件
export default async function ProductPage({ params }: { params: { handle: string } }) {
const product = await getProduct(params.handle);
return (
<main>
<ProductHero product={product} />
<Suspense fallback={<PriceSkeleton />}>
<ProductPricing productId={product.id} />
</Suspense>
<Suspense fallback={<ReviewsSkeleton />}>
<ProductReviews productId={product.id} />
</Suspense>
</main>
);
}
2. 积极优化图像
Shopify的CDN支持width、height和crop参数。使用它们。不要向375px的移动视口提供2000px的英雄图像。
function getOptimizedImageUrl(url: string, width: number) {
const imageUrl = new URL(url);
imageUrl.searchParams.set('width', String(width));
imageUrl.searchParams.set('format', 'webp');
return imageUrl.toString();
}
3. 预加载LCP图像
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
4. 内联关键CSS，延迟其他一切
我们保持折叠上方的CSS在14KB以下（一个TCP往返）。其他一切异步加载。
5. 边缘端渲染
Vercel Edge Functions和Oxygen的worker运行时都在边缘执行，全球给你亚100毫秒TTFB。这是你能拉动的单一最大性能杠杆。
6. 意图预取
不要预取视口上的所有内容。在悬停/触摸开始时预取。这以40%左右削减不必要的带宽，同时仍然感到即时。
结账扩展和后Checkout.liquid时代
这是强制许多商户手的变化：截至2025年8月，Shopify在Plus店铺上停用了checkout.liquid。如果你有自定义结账修改——大多数Plus商户确实有——你必须迁移到结账扩展。
结账扩展使用Shopify的UI扩展框架。你编写在定义的扩展点（购前、购后、配送、支付等）内Shopify结账中呈现的React类组件。
// 示例：购后追加销售扩展
import { useApi, reactExtension, BlockStack, Text, Button } from '@shopify/ui-extensions-react/checkout';
export default reactExtension('purchase.checkout.block.render', () => <UpsellBlock />);
function UpsellBlock() {
const { cost, lines } = useApi();
return (
<BlockStack>
<Text size="medium">添加匹配的配件？</Text>
<Button onPress={() => { /* add to cart logic */ }}>
添加￥129.99
</Button>
</BlockStack>
);
}
关键要理解的是：结账扩展无论你是无头还是使用Liquid主题都以相同的方式工作。 你的无头前端交给Shopify的结账，扩展在那里运行。这实际上是无头方法的重大优势——你的店铺完全自定义，但结账保持Shopify托管（PCI兼容、由Shopify维护等）。
Shopify Plus迁移策略
将现有Shopify Plus店铺迁移到无头是分阶段的操作。不要试图一次性做所有事情。这是跨我们项目最有效的方法：
第1阶段：基础（第1-3周）
- 设置前端框架（Next.js或Hydrogen）
- 使用缓存实现Storefront API连接层
- 构建设计系统/组件库
- 设置CI/CD管道
第2阶段：核心商务（第4-8周）
- 产品列表页面（收藏）
- 产品详情页面
- 购物车功能
- 搜索（使用Shopify的预测搜索API或第三方如Algolia）
- 通过Customer Account API的帐户页面
第3阶段：内容与营销（第9-11周）
- 非商务页面的CMS集成
- 博客/编辑部分
- 营销团队的登陆页面构建器
- SEO迁移（301重定向、站点地图、结构化数据）
第4阶段：启动与优化（第12-14周）
- 性能审计和优化
- A/B测试设置
- 分析迁移（GA4、服务器端跟踪）
- 通过功能标志或分割测试的渐进式流量迁移
总时间线：典型Shopify Plus店铺12-14周。具有复杂目录（50k+ SKU）或重度自定义的企业店铺可能需要16-20周。
100万美元ARR阈值：无头何时在财务上有意义
无头不是免费的。自定义前端开发比安装Liquid主题成本更高。持续维护需要开发者时间。那么什么时候数学能加得上呢？
基于我们的数据：100万美元ARR是无头Shopify开始产生清晰财务意义的阈值。
这是数学：
| 收入水平 | 估计转化率提升 | 收入增益 | 无头构建成本 | 年度维护成本 | ROI时间线 |
|---|---|---|---|---|---|
| 50万美元ARR | 10-15% | 5-7.5万美元 | 8-15万美元 | 2.4-4.8万美元 | 18-24个月 |
| 100万美元ARR | 10-15% | 10-15万美元 | 8-15万美元 | 2.4-4.8万美元 | 8-14个月 |
| 300万美元ARR | 10-15% | 30-45万美元 | 12-20万美元 | 3.6-6万美元 | 4-6个月 |
| 1000万美元ARR | 10-15% | 100-150万美元 | 15-30万美元 | 4.8-9.6万美元 | 2-3个月 |
低于100万美元，你最好投资在一个构建良好的Liquid主题的转化率优化。高于100万美元，性能收益增长得足够快以证明投资合理。高于300万美元，不采用无头是在桌上留下严重的钱。
对于无头构建的定价细节，查看我们的定价页面——我们在项目范围上是透明的。
选择代理商：Naturaily、Aalpha及其他
如果你在为无头Shopify工作评估代理商，这是我对2026年格局的诚实评估。
Naturaily是一家波兰代理商，以无头商务建立了良好声誉，特别是与Next.js和Vue Storefront。他们的优势在中市场——做100万到1000万美元的品牌需要专业构建而不需要企业定价。他们在技术上有能力并有良好的Shopify Storefront API经验。他们有时奋力应对的地方：高度自定义的B2B工作流和多市场Shopify设置。
Aalpha是一家印度开发公司，专注更广泛——他们做移动应用、企业软件和无头商务。他们的费率明显更低（通常比西方代理商低40-60%），这对预算意识的项目很有吸引力。权衡通常是项目管理开销和设计打磨中。如果你有强大的内部设计团队并能紧密管理项目，他们可以提供扎实的技术工作。
我们在Social Animal如何比较： 我们专门从事无头网络开发——不仅仅是Shopify，还有全频谱的无头CMS和框架工作，包括Next.js和Astro。我们的优势是品牌和公司需要深度技术专长而不需要大代理商开销。如果你对契合度好奇，联系我们——我们会诚实地告诉你我们是否是你项目的正确选择。
| 因素 | Social Animal | Naturaily | Aalpha |
|---|---|---|---|
| 专业化 | 无头网络（深度） | 无头商务+网络 | 全服务开发 |
| 主要框架 | Next.js、Astro、Hydrogen | Next.js、Vue Storefront | Next.js、React Native |
| 团队位置 | 美国 | 波兰 | 印度 |
| 典型项目范围 | 8-25万美元 | 6-20万美元 | 2.5-10万美元 |
| Shopify Plus经验 | 是（400+个无头站点） | 是 | 是 |
| 最佳用于 | 性能关键的店铺 | 中市场无头商务 | 预算意识的构建 |
使用Astro和其他框架的自定义店铺
这是大多数Shopify无头指南不会告诉你的东西：你不必使用React。
我们用Astro建立了几个Shopify店铺——特别是对于内容和编辑与商务一样重要的品牌。Astro的岛屿架构意味着你默认不发送任何JavaScript，只需要hydrate互动位（购物车、产品选择器、搜索）。
结果？LCP持续低于0.6秒。总页面权重低于100KB。这快得离谱。
---
// Shopify产品卡的Astro组件
import { getProduct } from '../lib/shopify';
const product = await getProduct(Astro.params.handle);
---
<article class="product-card">
<img
src={product.featuredImage.url + '&width=600'}
alt={product.featuredImage.altText}
width="600"
height="600"
loading="lazy"
/>
<h2>{product.title}</h2>
<p class="price">￥{product.priceRange.minVariantPrice.amount}</p>
<!-- 只有这个组件发送JavaScript -->
<AddToCart client:visible productId={product.id} />
</article>
权衡：Astro的商务生态更小。你会为购物车管理、身份验证和搜索编写更多自定义代码。但如果性能是你的主要指标，你的团队对额外工作感到舒服，这是一个合理的选择。
常见问题
无头Shopify对小店铺值得吗？ 对于收入低于50万美元的店铺，通常不值得。开发和维护成本超过了转化率改进。你更好地采用一个快速、优化好的Liquid主题如Dawn。一旦你超过100万美元ARR，经济学明确地转向无头方向。
2026年无头Shopify构建要花多少钱？ 根据复杂性、代理商位置和功能范围，期望初始构建8万-30万美元。持续维护每月运行2000-8000美元。南亚的预算代理商可以以2.5-8万美元交付，但你通常需要更强的内部项目管理和质量保证。
我可以将Shopify的结账与无头店铺一起使用吗？ 是的，你应该。Shopify的结账是PCI兼容、经过验证、处理支付处理。你的无头前端通过Storefront API创建购物车，然后重定向到Shopify托管的结账。结账扩展让你在Shopify的扩展点内自定义体验。
无头与Liquid主题之间的性能差异是多少？ 我们跨400+个站点的数据显示无头店铺在Core Web Vitals指标上比Liquid主题快60-75%。特别是，中位LCP从2.3-3.5秒（Liquid）下降到0.7-1.0秒（无头）。这转化为平均10-15%的转化率改进。
我应该为我的无头Shopify店铺使用Hydrogen还是Next.js？ 如果你的团队知道Next.js，使用Next.js。如果你从零开始且想要最集成的Shopify体验配以最少的配置，Oxygen上的Hydrogen很优秀。它们之间的性能差异可以忽略不计——团队专业知识和生态系统需求应该驱动你的决定。
我需要Shopify Plus来使用无头吗？ 从技术上讲，不需要。Storefront API在所有Shopify计划上可用。但在实践中，大多数无头构建受益于Plus功能：结账扩展、脚本、多店铺设置的Organization API，以及更高的API速率限制。在无头有意义的收入水平（100万美元+），你无论如何都应该在Plus上。
无头Shopify迁移要花多长时间？ 典型的Shopify Plus到无头迁移用经验丰富的团队需要12-14周。具有复杂目录、重度自定义或多市场设置的企业店铺可能需要16-20周。不要让任何人告诉你这是一个4周的工作——那是你最终以一个破碎的启动结束的方式。
当我转向无头时，我的Shopify应用发生什么？ 这是最大的痛点之一。许多Shopify应用注入脚本到Liquid主题中，这在无头前端上不会工作。你需要评估每个应用：一些提供你可以直接集成的API，一些有无头兼容版本，有些需要用自定义代码或替代服务替换。计划应用审计和迁移作为你项目范围的一部分。
我可以用Astro或其他非React框架与Shopify的Storefront API一起使用吗？ 绝对可以。Storefront API是一个标准GraphQL API——任何可以发出HTTP请求的框架都可以使用它。我们用Astro、SvelteKit甚至原生JavaScript建立了Shopify店铺。权衡是Shopify的官方工具（Hydrogen、购物车实用工具等）是基于React的，所以你会用其他框架编写更多自定义集成代码。