无头建站是什么? Headless站点的发展历史

TL;DR 文章摘要

Headless 建站是使大家能够使用熟悉的后台界面，同时使 Web 开发人员能够灵活地使用任何前端技术栈的一种技术。对于电子商务网站或者个人品牌网站来说，意思就是某个特定的前端框架和某种用于后端的数据库。

传统和无头的网站结构对比

那什么是无头？

无头(headless)听起来有点可怕，但它是一个专有的计算机术语，在网站开发领域一般指代没有用户界面。

比如在设计和建站领域，表示的是前后端分离，可以分开前端开发和后端开发解耦，逻辑分离，比如 Shopify 使用了 Hydrogen[1] 来实现 headless[2]，让模板或者应用[3]开发者不用关心复杂的逻辑，只要关心怎么实现用户功能。比如在爬虫领域，表示的是使用没有界面的浏览器引擎[4]。

接下来先让我们来了解一下有头、无头的概念和曾经的一些历史渊源，以及说明下现代的 CMS 框架为什么要选择它们、好处是什么，以及我们能够如何应用。

Headed vs Headless 网站

在 10 年前（2014 年），电子商务应用或者网站都是完全独立的，包括前端UI 和充满业务逻辑的数据库支持的后端，也被称作是有头网站（Headed website）或者说是单体架构应用（Monolithic Architecture）。

但随着技术的进步，或者说是大众媒介意识的变化，灵活性变得更加重要。比如说除了平时的电脑和手机，其他的各类用户渠道，比如智能手表、Alexa 类设备、数字标牌、信息亭、VR/AR 应用程序、社交媒体应用，需要用同一套的后端逻辑，如果还用单体架构，会非常难以维护。那么 Headless 的概念就应运而生了。

Headless 网站将 前端和后端分离，前端 UI 和后端数据库独立运行，通过 API 进行数据交互。这种架构使得开发者可以使用任何前端技术栈来构建 UI，例如 React、Vue、Angular 等，而无需受限于后端平台。

拿电脑做一个比喻。有头网站就像一体机电脑（笔记本电脑），将所有部件集成在一起，使用方便，但扩展性有限；无头网站就像组装电脑，可以根据自己的需求选择不同的 CPU、显卡、内存等部件，自由组装，灵活度更高。

但这个时候，headless 架构需要有一个经验丰富的架构师来实施，否则会对用户体验、SEO 带来比较大的负向作用。以下是各个维度的对比表格：

对比维度	headed 有头网站	Headless 无头网站
架构	前后端耦合的整合	前端分离
灵活性	有限	高
性能	可能较慢	较快
扩展性	可能更容易	后期较为复杂
安全性	可能更容易遭到攻击	安全性更高
适用场景	简单的网站和应用	复杂的网站和多平台应用

Shopify 和 WordPress 的无头机制和对应实践

Shopify 和 WordPress 都是流行的建站平台，但也提供了 Headless 机制，让开发者可以更灵活地构建网站。

Shopify 的 headless 开发

大家可能知道有 liquid 语言，但 Shopify 实际也为开发者提供了强大的 Headless Commerce 无头商务[5]开发工具：

• Storefront API: 允许开发者通过 storefront API[6] 访问 Shopify 商店的数据，例如产品、订单、客户等，并将其整合到任何前端应用中。
• Hydrogen 框架: 一个基于 React 的框架，可以帮助开发者快速构建 Shopify Headless 店面。Hydrogen[7] 提供了许多预先构建的组件和工具，简化了开发流程，并提升了网站性能。

无头Shopify的场景也是有不少的，可以自行挖掘需求。

WordPress 的 headless 开发

WordPress 同理，平时的古腾堡（Gutenberg）编辑器已经足够简单易用，如果你想要使用高级开发，比如采用NextJS 开发，那么需要使用高级自定义字段（Advanced Custom Fields[8], ACF）+ WP GraphQL[9] 来帮你去实现无头开发。也有 WordPress 自带的 REST API 允许开发者通过 API 访问 WordPress 网站的数据，例如文章、页面、用户等。

实现了无头WP的参考网站，有 TechCrunch[10]。通过 Headless 架构，TechCrunch 可以：

• 提升网站性能: 前后端分离可以优化网站加载速度，提升用户体验。
• 增强内容管理: WordPress 强大的内容管理功能可以帮助 TechCrunch 更有效地管理大量的文章和内容。
• 实现个性化设计: Next.js 可以帮助 TechCrunch 实现高度定制化的前端设计和功能。

如果想知道更多，可以去自行挖掘一下无头WordPress。

样例：WordPress 和 Shopify 混合前端开发架构

经过上面的描述，你也大概知道想要采取无头机制的，一般是无法满足自己的需求，想要使用自己的前端技术栈的。

比如像使用 Vue.js/Nuxt.js 或者是 React.js/Next.js 来开发网站，然而又希望使用 WordPress 这种内容管理工具 CMS 的网站开发人员，就会使用 WordPress 的无头机制（GraphQL 或者 API），但不使用 WordPress 的主题界面来实现 UX 界面。

更有一种高级用法：Shopify 和 WordPress 混合架构，同时在网站上使用两者。比如大家可能知道 Shopify 确实是在一些内容、SEO 上无法设置（因为官方不提供相应的接口，需要自行开发插件的），所以有人会使用这种混合架构，来实现类似于这种功能：

• 自己开发实现前端，使用接口来请求各类数据

• Shopify: 强大的电商功能，可以方便地管理产品、订单、客户等。

• WordPress: 强大的内容管理功能，可以方便地创建和管理博客、文章等。

• 采用 WordPress 来做博客等页面内容

• 使用一些社区评论工具和第三方 API

核心点在于 Shopify 和 WordPress 是不用关心主题开发的，而是自己开发，仅是借用了 Shopify 和 WordPress 的功能，结合其他的 API，来高度自定义开发一个网站。

个人观点：锦上添花，多多了解

Linus 个人的建议来说，headless 属于高级开发的一种，使用普通的架构其实已经足矣。现代化的博客框架有很多，比如我们官网博客采用的 halo[11]，国外流行起来的 Ghost[12]，都是为了简化用户心智、无需管理开发、只需要专注内容来做的博客框架。

是否要用 Headless 建站的核心点在于，你是要关注内容还是体验，而大部分情况下，有良好的体验（_或者说花里胡哨_）的电商网站和博客，并不一定有好的内容。并且，完全实现前后端业务和逻辑的解耦，不是一个小的开发团队需要、或者说能够考虑的事情。当业务足够大，不满足当前情况的时候，再尝试去寻找专业的独立站建站团队[13]（比如翼果科技 :) ）来帮助你完成架构设计和搭建。

喜欢技术开发是好的，但不能脱离业务。专注在好的文字内容、图片、视频等，以及综合多个渠道去考虑流量的来源，让网站和品牌先跑起来，永远比关注高级开发锦上添花来的收益要高。2025 年，先让网站活下去。

实际采用 headless 的无头电商网站的 5 个案例

以下案例来自TouchShop建站团队和 Alogolia 的整理[14]，翻译供各位参考：

1. Anker

Anker[15]采用无头POS架构来优化其零售业务系统。通过将前端界面(如收银APP)与后端数据管理完全分离，他们实现了以下优势：

• 快速市场响应：前端可以快速适应市场变化，无需改动整个系统架构就能更新设计和功能
• 多设备支持：任何设备（智能手机、平板、手持设备或固定收银机）都能作为前端访问后端系统，节省了专用硬件成本
• 高性能运行：由于前端不存储数据，所有数据由后端提供，使得收银过程更快速，减少了顾客等待时间
• 全方位数据整合：前端可以同时访问POS后端、ERP、CRM、电商后端和PIM等多个数据源，实现了真正的全渠道运营
• 微服务友好：系统架构非常适合集成微服务，便于维护和扩展，当需要更换某个功能模块时，可以轻松完成替换

这种无头架构让Anker能够更灵活地应对零售业务需求，提供更好的用户体验，同时降低了维护成本和系统复杂度。Anker也自己写了一下相关的无头技术文章[16]，可以参考。

2. Nike 耐克

这家鞋类零售商希望采用移动优先的方法来提升面向移动消费者的销售。为了优化所有页面的用户体验，他们实施了React单页应用（SPA）结合Node.js前端后端（BFF）[17]的方案。单页应用以简单优雅的方式展示内容，并在单个页面上加载所有内容，由于无需导航其他页面而提高了速度。与Node.js BFF的协同工作确保了无论前端应用运行在哪个平台上都能提供流畅的用户交互。这一改变使得耐克能够在市场份额上超越主要竞争对手。

3. Target

自从注意到80%的Target顾客在不同渠道开始和完成购物历程（例如，在网站上浏览，然后在实体店购买）后，这家零售连锁店的管理层意识到需要进行重大变革。他们将此视为增长机会，并将各个渠道连接起来。为了满足其全渠道市场需求，Target采用了无头架构方法来统一从网站产品页面到路边取货功能等各个接触点的客户体验。

4. Pure Formulas

这家线上保健品和营养补充剂品牌曾经饱受购物车放弃率高和转化率低的困扰。在解决这个问题的过程中，该公司成为行业内首个采用无头商务解决方案的企业。他们实施了渐进式网络应用（PWA；本质上是一个具有应用程序般体验和所有应用程序优势的网站），这显著改善了其网站性能、速度和响应能力。这一改变使Pure Formulas能够专注于其电商解决方案的速度和可靠性。公司成功降低了用户流失率，提升了用户体验，并改善了客户留存率。

5. 美国联合航空公司

即使是最大的航空公司之一也决定需要打破常规才能前进。为了改善乘客的航班预订体验（这是该行业成功的关键支柱之一），该公司实施了一个React渐进式网络应用。这改善了从旅客首次登陆页面直到预订步骤的整个用户流程。

6. Kirkland 柯克兰

速度对于创造引人入胜的用户体验非常重要，而这个知名装饰品牌网站的缓慢是一个令人担忧的问题。需要一个突破来为客户提供大型零售商应有的出色网络体验。切换到解耦架构解决了页面加载缓慢的问题，使Kirkland成为最快的零售网站之一。不仅如此，新的无头商务平台还包含了实验性功能，包括一键登录和指纹支付结账。

关于 Headless 的一些 FAQs

1. 什么是无头CMS (headless CMS)？

传统上，CMS （内容管理系统）既充当内容编辑的前端（表示层）又充当后端（内容数据库）。通过无头 headless CMS 实现，CMS 仅充当内容编辑的角色，前端由另一个解决方案（如自己开发、Gatsby 通过 API 或 SDK 访问后端服务）提供服务。

2. 已经开始用无头架构的电商网站有什么?

这一堆电商，都已经使用无头架构来帮助他们的业务更加灵活应对各种场景：_亚马逊, 百思买, eBay, Etsy, 可口可乐, J.Crew, Netflix, Spotify, 优步_。跟刚刚说的一样，小型网站暂时不需要关注这些。

3. Shopify headless是什么？

Shopify无头商务模式，指的是前后分离的架构。后端使用Shopify管理，前端使用自己偏好的框架开发。

4. Headless WordPress是什么？

Headless WordPress是指将WordPress作为内容管理系统（CMS）使用，但不使用其传统的前端展示方式。相反，前端可以使用任何技术栈（如React、Vue.js等）来构建，WordPress通过REST API或GraphQL提供内容。

引用链接

[1] Hydrogen: https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started
[2] 实现 headless: https://shopify.dev/docs/storefronts/headless
[3] 应用: https://apps.shopify.com/collections/custom-storefront-apps?shpxid=c6d48fdf-A364-47A9-2D23-E49094EE289D
[4] 没有界面的浏览器引擎: https://developer.chrome.com/blog/headless-chrome
[5] Headless Commerce 无头商务: https://www.shopify.com/plus/solutions/headless-commerce
[6] storefront API: https://shopify.dev/docs/api/storefront
[7] Hydrogen: https://hydrogen.shopify.dev/
[8] Advanced Custom Fields: https://www.awesomeacf.com/advanced-custom-fields-for-beginners-wordpress/
[9] WP GraphQL: https://www.wpgraphql.com/
[10] TechCrunch: https://techcrunch.com/
[11] halo: https://halo.run/
[12] Ghost: https://ghost.org/
[13] 专业的独立站建站团队: https://touchshop.yiguotech.com/
[14] Alogolia 的整理: https://www.algolia.com/blog/ux/what-is-a-headless-website-a-definition-and-examples/
[15] Anker: https://en.anker.net/
[16] 无头技术文章: https://en.anker.net/post/5-gruende-headless
[17] Node.js前端后端（BFF）: https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf
[18] Reddit 讨论：Are you using Headless WordPress?: https://www.reddit.com/r/Wordpress/comments/z83d54/are_you_using_headless_wordpress/
[19] Gatsby: 什么是无头 WordPress？: https://www.gatsbyjs.com/docs/glossary/headless-wordpress/
[20] Convertcart: 35个已经采用了无头的商务品牌: https://www.convertcart.com/blog/headless-commerce-examples