随着 Web 应用程序的不断演进，前端技术已经成为了 Web 应用开发中不可或缺的一部分。而作为前端的重要工具之一，CMS 已经成为了很多 Web 应用程序开发的标准。在 CMS 的帮助下，开发者可以快速地创建出高质量、易于维护的 Web 应用程序。但是，传统的 CMS 都是以网站为中心构建的，而随着 Web 应用程序的开发环境不断变化，用户对内容管理系统的需求也在发生着改变。
为了满足这些变化的需求，新一代的 CMS（Headless CMS）应运而生，它们提供了更大的灵活性和更好的可用性。在这篇文章中，我们将会对传统 CMS 和 Headless CMS 的优缺点进行对比，帮助你更好地选择适合你项目的CMS 方案。
传统 CMS 的优点
传统 CMS 可以在短时间内使网站变得生动、活泼，增加企业形象和营销宣传的效果，主要有以下一些好处：
- 易于使用：传统 CMS 通常是集成了很多功能的 CMS，用户可以通过直观的界面快速上手并平滑地进行操作。
- 灵活性高：传统 CMS 可以通过插件、扩展等方式快速配置，适应不同需求的情况。
- 部署简单方便：传统 CMS 可以快速部署，并且提供官方或者社区的支持和文档。
- 可以支持多个站点和多个语言，多租户支持。
传统 CMS 的缺点
随着互联网技术的不断发展，硬编码的 CMS 架构越来越难以面对日益复杂的 Web 应用程序的管理。它们的限制包括：
- 高可维护性：当修改或者添加新功能时，传统 CMS 因为太多的功能被硬编码的缘故，变得难以修改和维护。
- SEO 符合率低：由于模板的不可定制性，模板不灵活，而且不容易支持响应式设计，这使得 SEO 符合率较低。
- 不支持多终端：网站的 CMS 管理后台通常只支持大屏幕下的浏览器使用，远程办公和移动端没有好的解决方案。
- 耦合度高：当一个完整的页面无法满足开发人员所需的时候，开发人员往往需要穿过整个 CMS 的层级结构才能获得所需的数据。
- 对客户前端技术能力的要求高：为了有更好的样式，前后端不可避免地要进行打结和识别，需要一定的技术能力，这可能会超出客户团队的技术能力范围。
Headless CMS 的优点
Headless CMS 的解耦、灵活的架构为每个部分（如前端和后端）提供了更大的控制能力，使 Web 应用程序变得更加快速、高效、可靠。为此，我们列出 Headless CMS 的几个重要优点。
- 前后端分离：用户前端开发自由度更大，而且可以将整合效率提高到极致，可以实现真正的前端开发自由。同时后端api也得到了重复利用的机会。
- 支持多终端：Headless CMS 支持管理 API 或内容，从而使得开发人员可以在 Web 应用程序上更好地实现适合多个设备的后端。例如，为移动设备和 Web 应用程序创建不同的用户界面。
- 面向未来构建：Headless CMS 善于采用新技术，并会尽其所能地提高 Web 应用程序的性能。例如，可以很好地支持跨站点单页应用程序（SPA）甚至支持PWA。
- 自定义内容类型 : 支持自定义内容类型，走向内容管理与部分业务逻辑的再需求化，包括表单、列表、文档和文件等等。
- 只需要知道标准API和基本时序视图下的API，开发起来更容易，并且降低维护成本。
Headless CMS 的缺点
Headless CMS 的优点很明显，但是它们还有一些缺点需要注意。这些缺点可能会使得一些开发人员不愿使用 Headless CMS，并选择传统 CMS。
- 需要专业技能：Headless CMS 相对于传统 CMS 更加的高难度，需要开发人员拥有更加专业的技能，而且需要掌握多个技术领域的知识点。
- 前后端分离让开发工作更加复杂，需要精细的协调。
- 增加了 frontend development 的技术门槛，需要一定的前端开发经验。
- Headless CMS 没有界面，用户需要开发自己的 inteface，另外协作可能会增加了一份难度。
Headless CMS 其他方面的考虑
在选取 Headless CMS 时，还要考虑以下因素：
- 开源 vs 私有 vs 云：开源项目不收取软件费用，一般在 GitHub 上公开源代码，同时该类产品的发展路线往往活跃度高。此外，一些公司提供的 SaaS 和私有 Headless CMS 不需要用户自行主管。根据实际情况，用户可以选择最好的哪种 CMS，即根据项目的实际需求做出选择。
- 缓存：如果 Headless CMS 在 API 层执行缓存，则将在性能方面提供巨大的提升。
- 安全：Headless CMS 有可能需要保持更高级别的安全性，以避免潜在的数据泄漏和黑客攻击。因此，开发人员的确需要慎重考虑其安全性。
- NPM 包的效率。
Headless CMS 示例代码
作为示例代码，我们来看看如何使用 Strapi.js 来使用一个简单的 headless CMS 和在浏览器中使用这些内容。
-- -------------------- ---- ------- ----- --------- - ----- -- -- - --- - ----- --- - ----- ---------------------------------------- -- ----- ---- ---- -------- --- ----- ---- - ----- ----------- -- ----- ---- ------------------ - ----- --- - --------------- - -- ------------展开代码
从上面的示例看，我们可以看到一种使用 fetch 和 headless CMS 进行数据交互的方法。这里使用了单页应用程序，但是也可以选择使用 Angular、React、Vue 等前端框架。同时还可以使用 GraphQL 来进行数据交互。总之，Headless CMS 为前端开发带来了全新的自由和灵活性，但是也要注意它们的缺点和使用标准。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c83250e46428fe9ee66acf
