用可交互的界面模拟，直观理解传统 CMS 和 Headless CMS 的区别
先看传统方案怎么工作。以 WordPress 为例，运营在后台编辑内容，WordPress 直接生成网页。
运营点击"更新"
内容保存到 WordPress 的 MySQL 数据库
用户访问 tp-link.com/products/deco-x50
请求到达 WordPress 服务器
WordPress 从数据库取出内容
产品名称、描述、价格、图片路径……
WordPress 用 PHP 模板把内容"套"进 HTML
模板决定了页面的布局和样式——这一步内容和展示绑定了
返回完整的 HTML 网页给浏览器
浏览器直接显示，结束
第 4 步就是传统 CMS 的瓶颈——内容和展示在服务器上绑死了。WordPress 的 PHP 模板同时决定了"显示什么数据"和"数据长什么样"。
如果你想：用 React 重写前端？不行，WordPress 只能输出它自己模板生成的 HTML。同一份产品数据在 App 里展示？不行，WordPress 只会生成网页。换一套设计？必须改 PHP 模板，而不是改 React 组件。
现在看 Headless CMS。运营的体验几乎一样——还是在后台填表单。但后面发生的事完全不同。
对运营来说，体验确实很像——都是在后台填表单、上传图片、点发布。关键区别不在这个界面，而在点了"Publish"之后发生的事。
运营点击 "Publish Changes"
内容保存到 Contentful 的云数据库
Contentful 通过 API 暴露这份数据
注意：不生成任何网页。只是把结构化数据准备好，等别人来取。
到这里 CMS 的工作就结束了。它不管数据最终会变成什么样的页面。接下来看谁来取数据、怎么用。
任何人（网站、App、邮件系统）都可以调用这个 API：
返回纯 JSON 数据——没有任何 HTML、没有任何样式，只有原始数据：
{
"name": "Deco X50",
"slug": "deco-x50",
"tagline": "全屋覆盖 Mesh WiFi 系统",
"price": 199.99,
"currency": "USD",
"heroImage": {
"url": "https://images.ctfassets.net/xxx/deco-x50-hero.jpg",
"width": 2400,
"height": 1600
},
"description": "Deco X50 采用最新的 WiFi 6 技术...",
"specs": {
"wifi": "WiFi 6 (802.11ax)",
"speed": "AX3000",
"coverage": "5000 sq ft"
},
"seo": {
"title": "Deco X50 | Whole Home Mesh WiFi",
"description": "Cover your entire home with fast, reliable WiFi 6..."
},
"status": "published"
}
传统 CMS 返回的是完整的 HTML 网页（内容 + 样式 + 布局全绑在一起）。Headless CMS 返回的是纯数据（JSON）——只有文字、数字、图片链接，没有任何视觉信息。就像餐厅只提供食材，不负责做菜——你拿到食材后，想做中餐、西餐、日料，随你。
用户访问 tp-link.com/products/deco-x50
请求到达 Next.js 服务器（不是 CMS 服务器）
Next.js 调用 Contentful API，拿到 JSON 数据
就是上面那份 JSON——纯原材料
Next.js 把数据灌进 React 组件（模具）
工程师提前写好的组件决定了布局、字号、颜色、动画——这些和 CMS 无关
输出完整的 HTML 网页，返回给浏览器
用户看到精美的产品页——但 CMS 对页面的视觉没有任何影响
Headless CMS 最大的价值：运营在 CMS 里只录入一次，多个渠道各自从 API 取数据、各自决定怎么展示。
全屋覆盖 Mesh WiFi 系统
★★★★☆ 4.2
全屋覆盖 Mesh WiFi
$199.99
Deco X50
全屋覆盖 Mesh WiFi 系统
$199.99
立即选购 →运营在 Contentful 里改了产品名称或价格，三个渠道自动同步更新——因为它们都是从同一个 API 取数据。
如果用 WordPress，你需要在 WordPress 里改一次网站的，再到 App 的后台改一次，再到邮件模板里改一次。改三次，还容易不一致。
运营把 Deco X50 的价格从 $249.99 改成 $199.99。看两种 CMS 分别发生了什么：
① 运营在 WordPress 后台改价格
↓
② WordPress 重新生成 HTML 页面
PHP 模板 + 新价格 → 新 HTML
↓
③ 网站更新了
↓
④ App 呢？不会更新
WordPress 只生成网页，App 有自己的数据源，运营要去 App 后台再改一次
↓
⑤ 邮件模板呢？也不会更新
运营要去 Mailchimp 再改一次
改 1 次价格 = 改 3 个地方
① 运营在 Contentful 后台改价格
↓
② API 返回的数据自动更新
JSON 里的 price 字段从 249.99 变成 199.99
↓
③ 官网下次请求 API 时自动拿到新价格
Next.js ISR 模式：几分钟内自动刷新
↓
④ App 下次请求 API 时也自动拿到新价格
所有渠道读的是同一个 API
↓
⑤ 邮件系统下次发邮件时也用新价格
Klaviyo 从 API 拉数据生成邮件
改 1 次价格 = 所有渠道自动同步
修改下面 CMS 表单中的产品名称和价格，观察右边三个渠道如何实时同步变化：
把产品名称改成 "Deco X90"，把价格改成 299.99——观察右边三个渠道和下方的 JSON 如何同时变化。这就是 Headless CMS 的核心价值：一次修改，全渠道同步。
| 传统 CMS（WordPress） | Headless CMS（Contentful） | |
|---|---|---|
| 输出什么 | 完整的 HTML 网页 | 纯数据（JSON） |
| 谁决定页面长什么样 | CMS 的 PHP 模板 | 你的 React 组件（完全自主） |
| 前端自由度 | 受模板限制 | 完全自由（React/Vue/App/任何东西） |
| 多渠道 | 只能输出网页，App 和邮件需要单独维护 | 任何渠道都能调 API 取数据 |
| 改一次价格 | 改 N 个地方（每个渠道改一次） | 改 1 次，全渠道自动同步 |
| 运营体验 | 后台填表单 | 后台填表单（几乎一样） |
| 性能 | 每次请求都要 PHP 渲染，慢 | Next.js SSG/ISR 静态缓存，极快 |