从 Headless CMS 到静态网站生成器——JAMstack及技术选型

随着互联网的不断发展，一些新的技术也层出不穷。其中JAMstack技术近年来获得了广泛关注。那么，JAMstack到底是什么呢？如何选型呢？本文将为您一一解答。

什么是 JAMstack

JAMstack是一种用于 web 应用程序开发的现代堆栈体系结构，具有以下三个核心特性：

  • JavaScript：客户端JavaScript提供整个站点或应用程序。例如：基于React或Vue的应用程序。
  • APIs：所有服务器端交互都通过 APIs 进行，每个API只执行一项特定任务。 例如，使用Headless CMS的API来获取博客文章。
  • Markup：没有服务器端编译，节点缓存或数据库查询的手动管理。 例如：使用Static网站生成器在构建时预编译（precompiled）。

JAMstack使开发人员可以最大化网站或应用程序的速度，安全性，可扩展性和可维护性，同时提供更好的开发体验。

为什么选择 JAMstack

  1. 速度快：没有动态编译或从数据库中提取数据的开销，页面可以静态分配并通过CDN进行高速缓存，使网站速度更快。
  2. 更安全：与传统的LAMP（Linux，Apache，MySql， PHP）堆栈不同，JAMstack没有后端业务逻辑，这意味着JAMstack站点中没有可被攻击的代码。 而且，只通过 APIs 进行数据访问更加安全。
  3. 更可扩展：每个 API 只需要执行一项特定任务，使整个开发过程更加模块化和可扩展。这意味着您可以在不影响其余应用程序的情况下更轻松地添加新功能。
  4. 更可维护：所有网站内容均在 Git 中管理。 这意味着你可以在版本控制中管理你的内容，保证你整个网站历史记录的可追溯性。

技术选型

JAMstack由 JavaScript、API和Markup三部分组成。针对这三部分，本文来推荐大家几个使用较为广泛的技术。

  1. JavaScript框架
  • React：React 是一个用于构建用户界面的 JavaScript 库。React 的主要优势在于可重用组件。
  • Vue：Vue 是一个渐进式的 JavaScript 框架，非常适合构建交互式的单页应用程序。
  • Angular：Angular 是一个由 Google 开发的前端框架，它具有对可重用组件的广泛支持。
  1. API
  • Headless CMS (Joomla, WordPress, Drupal)：Headless CMS 提供了一种无头模型的 CMS，您可以使用它来提供对已发布内容的 API 访问。
  • ContentStack：Contentstack 是一款“Content-as-a-Service”(CaaS)平台，可以为开发人员提供 API、SDK、Webhooks 等功能。
  • Strapi（open-source）：Strapi是一种开源的 Headless CMS。Strapi将完全控制 API 交给了开发人员。这使得您可以快速构建自己的 API。
  1. Markup
  • GatsbyJS：使用 React，Webpack 和 GraphQL，有助于在您的网站上构建静态页面和最终用户更好的体验。
  • Jekyll：Jekyll是 Github Pages 上使用的引擎，該引擎通过 Markdown 文件生成静态网站。
  • Hugo：基于 Go 的静态网站生成器，适用于大型站点。

##示例代码

------ ----- ---- --------
------ ---- ---- ------------
------ ----- ---- ---------------------

----- ---- - -- ----- -- -- -
    --
        ------
            --------------- ------------
        -------
        -----
            -------------
            ----
                --------------- ---
                    --- ----------------
                        -- -----------------------------
                            ---------------------
                                            ----
                                            -------------------------
                                        -----
                                    ---
                                -----
                            ------
                        ---
                    -

-------------------- - ----- ---------- -
    ----- --- - ----- ---------------------------------------
    ----- ---- - ----- -----------
    ------------------- ------
    ------ -
        ------ -----------
---------- ------- -----

以上例子为 React 和 Headless CMS 的示例。您可以使用上面的代码来构建一个静态博客，博客文章将通过 Headless CMS 的 API 获取。

结论

JAMstack 是一种现代化的技术架构，可以使开发人员最大化地提高其网站性能、安全性、可扩展性和可维护性，而选择与哪些技术结合使用，可以根据您的具体需求和情况。

希望本文能够为您提供一些有关 JAMstack 和技术选型方面的指导，并在实践中收获不少。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711741fad1e889fe2ff37d0

阅读全文

精选内容

相关推荐

    暂无