什么是 JAMstack？

如果您像我一样，也许您听说过这个术语，或者也许您被众多静态站点生成器所淹没，不知道它们到底是什么以及它们解决了什么问题。

在本文中，我想像您一样了解什么是 JAMstack，为什么它现在如此流行以及它有什么好处。

果酱

JAMstack 代表 Javascript、API 和 Markup。

JavaScript负责处理动态功能。您可以使用普通的 JavaScript 或任何您想要的框架。

API，您通常在后端服务器上处理的操作现在被抽象为可重复使用的 API，可通过 HTTPS 使用 Javascript 访问。

标记，静态 HTML 文件。这在构建时预先构建，通常使用静态站点生成器。

这些概念看起来非常通用，因为它们不适用于特定技术，例如 MERN （Mongo、Express、React、Node）。

什么不被视为 JAMstack 应用程序？

建立在 MERN 等技术之上的应用程序不被视为 JAMstack，这是因为这些应用程序使用 Web 服务器在运行时生成更多的 HTML。

根据 jamstack.org 的说法，使用 WordPress 或 Drupal 等服务器端 CMS 构建的应用程序也不是使用 JAMstack 构建的。

一般来说，任何需要服务器运行或依赖后端语言的应用程序都不被视为 JAMstack 应用程序。

内容分发网络 (CDN)

JAMstack 应用不依赖于 Web 服务器，它们将标记和资源提取到静态文件中，然后通过 CDN 进行分发。这提供了更好的性能和更快的应用程序。现在你可能会问，如何为我的应用生成这些静态文件？

静态站点生成器 (SSG) 正是为此而设计的，Gatsby、Next.js、Nuxt和许多其他选项可帮助您使用最喜欢的 Javascript 框架开发应用程序，然后在构建时生成可从 CDN 提供的静态文件的完整结构。

您还可以使用许多选项来部署这些静态应用程序，最常见的是Netlify、AWS S3、Vercel、Firebase。

如果您想深入了解静态生成器，以及如何根据您的需要选择合适的生成器，请查看这篇文章。

但既然所有内容都是静态的，我们如何获取动态数据？

这时 API 就派上用场了，我们可以使用 API 发出请求或处理授权。以一个电商应用为例，你使用静态网站生成器来开发标记，但我们如何获取产品数据呢？

有一个有趣的概念叫做“无头 CMS”，我们可以在其中存储和更新产品，以便以后在 JAMstack 应用中访问它们。现在你可能会问，这与像 Wordpress 这样的传统 CMS 有什么不同？让我们来解释一下。

无头 CMS 让你的内容可以通过 Graphql 或 Rest API 访问，无论你的数据显示在何处，这种无头 CMS 只需存储并交付数据即可。而像 Wordpress 这样的传统 CMS 不仅存储内容，还存储应用程序的前端部分以呈现特定内容。

与 SSG 一样，有很多无头 CMS选项，根据您的需求，为您的应用选择合适的选项。

无头 CMS 并非处理应用中动态数据的唯一方式，即使您想存储一些用户输入，也可能需要为应用进行自定义工作。您可能认为需要服务器和数据库，但事实并非如此。我们可以使用无服务器函数和 DBaaS （数据库即服务）来管理这些功能。

优势

既然我们讨论了 JAMstack 的工作原理以及可以使用的工具，那么让我们直接了解这种构建网站方式的优势。

• 性能：由于我们提供静态文件，因此速度非常快。

• 更便宜：托管这些文件更便宜。

• 安全性：通过将流程抽象为 API，可以减少攻击区域。

• 开发人员体验：由于我们不再需要维护单独的堆栈，因此可以更加专注于前端的开发。

希望这篇文章对你有所帮助，我个人正在尝试 Gatsby，效果非常好。如果你正在寻找构建下一个应用的新方法，不妨试试 JAMstack。