随着前端技术的不断发展，越来越多的网站采用 Headless CMS 的架构。Headless CMS 是一种内容管理系统架构，它分离了内容与界面，只提供 API 接口，让前端开发者自由选择使用哪一种技术来展示网站内容。相比之下，WordPress 是一种常见的 monolithic CMS，提供了一站式的解决方案，包括内容管理和前端展示。
本文将通过对 Headless CMS 和 WordPress 的比较，来探讨采用 Headless CMS 的优势和注意事项。
Headless CMS 的优势
灵活性
由于 Headless CMS 只提供 API 接口，并不控制前端展示，所以前端开发者可以完全自由使用他们喜欢的技术栈来展示网站内容。这意味着开发者可以使用 React、Vue、Angular 或任何其他现代的前端框架来呈现网站，而不受 CMS 的限制。这种灵活性使得采用 Headless CMS 的项目更容易适应不断变化的技术趋势和用户需求。
性能
当使用 Headless CMS 时，后端只需提供数据 API，没有任何视图的处理，这意味着更少的服务器负载和更快的响应速度。前端开发者可以使用缓存等技术来优化 API 的性能，缓解服务器负担。此外，使用 Headless CMS 的架构可以更好地与静态网站生成器（如 Gatsby、Next.js）配合使用，生成更快、更高效的静态网站。
安全性
由于 Headless CMS 只提供数据 API，而不涉及视图层，所以很难发现安全漏洞或脆弱性。同时，没有管理界面的存在，黑客攻击的难度也更高。这种架构可以让开发者专注于代码质量和安全性，而不用处理管理界面的安全性问题。
WordPress 的优势
一站式解决方案
WordPress 是一种强大的 CMS，提供一站式的解决方案，包括内容管理和前端展示。WordPress 的插件生态系统非常庞大，可以轻松实现功能扩展，适用于中小企业和个人博客等不需要太高灵活性和定制性的场景。
易用性
相比之下，Headless CMS 的 API 接口需要前端工程师额外开发和维护一个单独的前端，这对于没有前端开发能力的用户来说可能是个难点。而且对于一些现成的主流CMS来说，它们已经搭载了前端模板，开发人员可以通过数据原型制定模板，来在不进行额外开发的情况下，实现基础的网站搭建。
如何选择
选取 Headless CMS 还是使用 WordPress 取决于具体的项目需求。如果开发者需要在不同设备上展示相同内容，或者需要使用现代的前端技术进行网站构建，那么 Headless CMS 可能是一个不错的选择。但是如果用户只是需要一个简单的博客或企业网站，WordPress 可能是一个更好的解决方案。
Headless CMS 示例代码
下面的示例代码使用 Strapi 作为 Headless CMS，React 作为前端框架来展示网站内容，并介绍了如何使用 GraphQL 获取数据。
配置 Strapi
- 安装 Strapi:
npm install strapi@alpha -g - 创建 Strapi 项目:
strapi new my-project - 启动 Strapi:
cd my-project && strapi start
创建内容类型
- 在 Strapi 管理界面中创建一个新的内容类型:
Article - 添加字段:
title(string),content(text),date(date)
创建 GraphQL Schema
- 安装依赖：
npm install --save graphql graphql-tools apollo-server-express - 在项目中创建 schema.js 文件，代码如下：
-- -------------------- ---- -------
----- - --- - - ---------------------------------
----- -------- - ----
---- ------- -
--- ----
------ -------
-------- -------
----- -----
-
---- ----- -
--------- -----------
-
------ ----
--
-------------- - ---------创建 GraphQL Resolver
- 在项目中创建 resolvers.js 文件，代码如下：
-- -------------------- ---- -------
-- -- ------ ---
----- ------ - --------------------------------------------
-- -- ------ --- --
----- ------ - ------------------- -- ------------------------
----- ------------ - --- -----------------------
----- --------- - -
------ -
----- ---------- -
-- - ------ -------
----- - ---- - - ----- -----------------------------------
-- ---------------
------ ----------- --- ------ -------- ---- -- -- --
---
------
--------
-----
----
--
--
----- -
-- --- ---- -----
---------------- -
------ --- ------------
--
----------------- -
------ --- ------------
--
----------------- -
-- --------- --- --------- -
------ --- ----------------
-
------ -----
--
--
--
-------------- - ----------创建 Apollo Server
- 在项目中创建 index.js 文件，代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - ------------ - - --------------------------------- ----- -------- - -------------------- ----- --------- - ----------------------- ----- --- - ---------- -- -- ------ ------ -- ----- ------ - --- -------------- --------- --------- --- -- ------- ------- --- ------------------------ --- --- -- ----- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
创建 React 组件
- 在项目中创建 App.js 文件，代码如下：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ------------- -------------- --------------- --- - ---- -----------------
-- -- ------ ------ --
----- ------ - --- --------------
---- -----------
------ --- ----------------
---
-- ------
----- -------------- - ----
----- -
-------- -
--
-----
-------
----
-
-
--
-------- ----- -
----- ---------- ------------ - -------------
------------ -- -
-- -- ------ ------ ------
-------------- ------ -------------- --
-------- ---- -- -- ---------------------------
----------------------
-- ----
------ -
-----
------------ --- ---------
----
---------------- --- ------ -------- ---- -- -- -
--- ---------
----------------
----------------
----------- ----------------------------------------
-----
---
-----
------
--
-
------ ------- -------- -- -
------ -
--------------- ----------------
---- --
-----------------
--
-使用上述代码可以实现一个简单的 Headless CMS 网站，这个网站使用了 Strapi 作为后端数据源，React 作为前端展示技术，使用了 GraphQL 来获取数据。开发者可以根据需求优化和扩展这个例子来满足自己的需求。
总结
Headless CMS 是一种越来越流行的架构，它提供了极大的灵活性和可扩展性，使前端开发者和企业更好地满足不断变化的技术趋势和用户需求。相比之下，WordPress 适用于中小企业和个人博客等不需要太高灵活性和定制性的场景。开发者可以根据具体需求选择适合于项目的 CMS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e70741f6b2d6eab325e780