Headless CMS & JAMStack

发表于

什么是CMS

CMS是 Content Management System 的缩写，意为 内容管理系统。 是一个完整的信息组织和管理的体系。它对同一类型的信息进行分类，且每一类信息都可以进行增删改查操作。此外，又采用了统一的用户和权限管理对信息的使用进行控制。内容管理系统普遍用于企业信息化建设和电子政务。

传统的 CMS 是将内容存储在数据库中，并使用一组Restful API，和对应的一组基于html的 模板文件 来管理内容呈现的管理信息系统，比如 WordPress。

WordPress是一个开源的 CMS，允许用户构建 动态网站 和 博客。WordPress是网络上非常流行的博客系统，可以通过其后台管理系统，进行内容更新，自定义和管理网站。

什么是 Headless CMS

简单地说，Headless CMS(后面简称HCMS)是一种内容与表现形式分离的CMS。

HCMS 通过 API提供结构化数据（如 JSON，无样式的XML）给开发者，开发者负责通过其他技术将内容展示在网站或者客户端等独立系统中。内容创建者仍然可以使用一个编辑接口(editing interface) 修改 HCMS 内容。

传统的 CMS 前端(您在浏览器中看到的)和后端(数据库和软件层)是紧密耦合的。内容和它的呈现方式在同一套代码体系中。而 HCMS 负责内容管理，与显示内容的前端是分离的。即 HCMS 只输出 API ，不输出页面，这样可以让开发者能够用最好的技术来建立优越的用户体验。

当你的内容是可用的结构化数据，任何客户端或应用程序(无论是JAMStack应用程序还是移动设备)都可以使用它。比如，你可以使用 HCMS 为 Gatsby 站点和其他内容通道提供JSON内容源。

GatsbyJs 是一个现代化的网站构建系统，拥有完整、丰富且开源的生态圈。它利用 react + GraphQL 产出多页面应用。通过插件，Gatsby可支持多种 HCMS服务，比如Contentful、Ghost和Prismic。
如果你使用WordPress，也没有必要切换。你可以使用 WordPress 的 REST API 作为 HCMS 服务，这样你就可以继续使用已经熟悉的 WordPress 编辑工具进行内容编辑。

什么是 JAMStack

既然 HCMS 只负责内容管理，那么前端便需要一套与之契合的 架构体系 来完成显示之责，这便是 JAMStack 。

JAMStack 是指使用JavaScript、API和Markup构建的技术堆栈，JAM是JavaScript、API和Markup的简称，JAMstack一种基于客户端JavaScript，可重用API和预构建Markup的现代Web开发架构，需要符合下面三个标准：

  • JavaScript：请求/响应周期中的任何动态编程都由JavaScript处理，完全在客户端上运行。这可以是任何前端框架/库，甚至是轻量JavaScript。
  • API：所有服务器端进程或数据库操作都被抽象为可重用的API，使用JavaScript通过HTTPS访问。这些可以是定制的或利用第三方服务。
  • Markup：模板化标记应该在部署时预先构建，通常使用内容站点的站点生成器或Web应用程序的构建工具。

JAMStack 核心原则是 预渲染 和 解耦。

  • 预渲染(pre-rendering)： 通过 JAMStack，整个前端在构建过程中被预构建成高度优化的静态页面和资源。

    • 这意味着，你甚至可以跳过web服务器，选择 对象存储服务(OSS) 和 内容分发网络 (CDN) 托管你的站点。
    • 目前已经有很多流行的 静态站点生成器（Static Site Generation 简称 SSG），比如NextJS、Gatsby、Hugo、Jekyll、Eleventy等。

  • 解耦(decoupling)：与服务端分离。不需要使用 数据库 或 服务器端编程语言。

    • 与之对应的后端服务是一系列返回JSON或XML内容的 API。这个 API可以是托管的 数据存储、HCMS 或 自定义应用程序。
    • JAMStack 站点可以在构建时使用这些服务，也可以在运行时通过 JavaScript 直接从浏览器使用这些服务。
    • Sourcebit 通过从任何第三方资源中提取数据来帮助开发人员构建数据驱动的JAMstack站点。

很明显，JAMStack 和 HCMS 是高度契合的。

对象存储服务（Object Storage Service，OSS）是一种海量、安全、低成本、高可靠的云存储服务，适合存放任意类型的文件。

JAMStack 优势

  • 速度: 没有数据库层 和 软件服务层导致的开销。因此，它们的渲染和加载速度比传统的一体化架构的站点更快。

  • 托管灵活性: 由于是 静态文件，JAMStack站点可以托管在任何地方。您可以使用传统的 web服务器软件，如Apache或Nginx。为了获得最佳的性能和安全性，您可以使用 OSS 和 CDN，如Netlify、Render或AWS的 S3和 Cloudfront。

  • 更好的开发体验: 前端开发人员无需了解 服务器端语言 就可以构建站点。后端开发人员可以专注于Api构建。解耦的开发团队可以并行工作，允许每个团队专注于他们最擅长的工作。使用第三方CMS服务还意味着你的开发-运营团队不必管理单独的内容栈。

  • 更好的安全性: 没有数据库和软件层意味着 JAMStack 站点不容易受到 SQL 注入或 服务器端代码注入攻击。页面是预构建(pre-build)的，因此不会面临服务器端包含注入攻击的风险。在CDN上托管站点可以免受服务攻击。

JAMStack 最佳实践

  • 整个项目放CDN上

    • 因为JAMStack项目不依赖服务器端代码，所以它们可以分布式而不是生活在单一服务器上。直接放CDN上提供服务，可以释放出无可匹敌的速度和性能。带来更好的用户体验。

  • 使用现代构建工具

    • 利用现代构建工具的生态圈。这是一个快速发展的空间，你会希望今天能够使用明天的Web标准，而不是等待明天的浏览器。比如目前用到的 Babel、PostCSS、Webpack。

  • 自动构建

    • 因为JAMStack 的 markup 是预构建的，所以在你运行另一个构建之前，内容更改不会上线。将这个过程自动化会减少挫败感。你可以使用webhooks自己来完成，或者使用包含 自动服务 的发布平台。

  • 原子部署

    • 当 JAMStack 项目发展到足够大大，新的改变可能需要重新部署数百个文件。一次性上传这些文件这一进程完成前，会造成信息不一致的状态。你可以使用一个允许你进行 “原子部署(Atomic Deploys) “ 的系统来避免这种情况，在这个系统中，在所有更改的文件被上传之前，任何更改都不会上线。

  • 即时缓存失效

    • 当从构建到部署的周期成为一种常态时，你需要明白，当部署上线时，就真的在线上了。需要确保你的 CDN 做好 即时缓存失效 处理。

  • 一切尽在 Git中

    • 有了JAMStack项目，任何人都应该能够进行git克隆，用标准的程序（比如npm install）安装所需的依赖项，然后就可以在本地运行整个项目。无需克隆数据库，无需复杂的安装。这减少了贡献者的摩擦，也简化了测试工作流程。

总结

Jamstack 本质是一种增强的静态网站，它的出现很大程度上得益于各大云厂商提供的云上能力，包括更容易管控的 CDN/DNS、Serverless Function、DevOps 工具等等。

Jamstack 适合一些内容更新不太频繁的网站（比如新闻、电商、文档）。它不适合论坛，聊天室，金融信息……等高度动态化的网站。目前最大用用武之地还是在 HCMS， Headless Commerce（无头电商）这类领域。

参考&拓展资料

gatsbyJs文档
gatsbyJs官网
gatsbyJs plugins Library
JAMStack
GraphQL官网
Gatsby精粹，面向未来的blog
Next.js: Server-side Rendering vs. Static Generation
Bringing Next.js to the JAMstackhttps://cloud.tencent.com/developer/article/1439913)
Jamstack，下一代Web建站技术栈？