随着技术的不断发展，Web 站点的架构也越来越多样化。传统的 web 网站大多采用服务器端渲染，通过请求会将完整的 HTML 页面返回给客户端浏览器。而如今，随着前端技术的日益成熟，越来越多的网站开始采用前端渲染，通过 AJAX 或者 Web socket 和 API 来请求数据渲染并更新页面，这种方式被称为 SPA（Single Page Application），而 Headless CMS 正是适用于 SPA 架构中的一种 CMS 模式。
传统 CMS 和 Headless CMS 的区别
传统 CMS 是一种将内容管理和网站管理完全整合在一起的模式。一般包含的功能包括内容编辑、网站模板编辑、网站管理等，整个系统运作的流程大致是：编辑人员进入系统编辑内容，内容保存到数据库中，网站发布时将内容结合模板进行渲染，最终生成完整的网站页面返回给客户端。
而 Headless CMS 是一种将内容于前端渲染完全解耦，将内容管理单独提取出来作为一个后台服务，网站前端通过 HTTP 请求 API 获取到内容，再把内容渲染出来，这样做的好处就是前后端职责分离，并且可以配合不同的渲染模板进行定制化开发。在 SPA 站点中使用 Headless CMS，一般的请求流程比较是：
--- --- ---- --- --- --- -------- ---
Headless CMS 的优势和缺点
Headless CMS 的优点
相对于传统的 CMS 模式，Headless CMS 更加方便，有以下优势：
- 拓展性更高 由于前后端内容是完全分离的，前端可以使用任何技术栈配合后端 API 使用，而传统 CMS 在这方面可能就会有局限性，功能和使用方式大多固定，不太好扩展。
- 渲染速度更快 Headless CMS 采用前端渲染，并仅仅返回所需的数据而非页面，因此对于网站性能来说，提高了打开速度和响应速度的同时也降低了传输的数据大小。
- 更加安全 该模式的另一个好处是更加安全，因为服务器无需返回 HTML，只需要提供少量数据，自然会减少黑客攻击的风险
Headless CMS 的缺点
但 Headless CMS 模式也有缺点：
- 对技术的要求较高 该模式需要前后端技术协作完成联系，需要前端和后端能够相互理解，掌握相应的技术，因此不太适用于小型团队。
- 一些传统的 CMS 功能不支持 例如，内容审查、搜索排名等，都是传统 CMS 功能的一部分，但在 Headless CMS 中可能需要另外开发。
Headless CMS 在实践中的应用
Headless CMS 本身并不是针对特别的业务场景开发的，它更是其它的客户端应用的服务器端接口。以下通过一个 Spa 应用的例子来说明如何使用 Headless CMS：
在这个例子中，我们使用 Contentful 作为 Headless CMS，创建一个博客网站。首先，需要先在 Contentful 上创建 content type，定义博客文章的 schema：
-
--------- -
-
----- --------
------- --------
------- ---------
----------- ----
--
-
----- -------
------- -------
------- -------
----------- ----
--
-
----- -------
------- -------
------- -------
----------- ----
--
-
----- -------
------- -------
------- ---------
----------- -----
--------- ----
--
-
----- ------------
------- ----- -------
------- -------
----------- -------
-
-
-接着，我们开始从 contentful 获取内容，并渲染到页面上。在 Vue.js 或者 React 中，可以定义一个 <BlogArticle> 组件，并使用 contentful 的 api 获取数据并渲染到页面上。
----------
-----
------------------------------
--------------------- - ----------------
---- ---------------------------------------- -------------------------------------------- -------
---- --------------------------------
------
-----------
--------
------ ------- -
----------- -
----- ------ - ------------------------------------
------ --------------------------------
------------ -----------------------------------
---
------ ------------------- ------------- ----------- -------------- ----------------------- --
------------- -- -----------------
---------- -- -- ---- ----
-
--
---------简单说一下这段代码的实现原理：通过 Contentful 的 HTTP API 获取到数据，并以一个对象的形式传递到组件的异步数据方法 asyncData 中，异步数据在组件挂载之前被解析好，并传递到组件实例中，就可以进行渲染了。
最后，就可以得到一个简单的博客网站，如图：
结论
综上所述，Headless CMS 在某些特定的场景下可能更为适用，它的好处是容易拓展，渲染速度快，安全性高。但是在一些传统 CMS 功能不支持的情况下，需要另外开发，对技术要求较高。选择 Headless CMS 中最重要的任务是根据你的实际项目需求进行评估，判断其是否适合于该项目。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67385629317fbffedf0fba71