近几年，Jamstack 架构的流行度快速增长并不断发展，不再是仅仅作为时髦词汇而被使用。相反，它已经成长并成熟为一个真正强大的生态系统和社区，是解决实际问题和应用的一种有效方法。例如，它可以用于创建高度稳定和高性能的博客和着陆页面。因此，在本文中，我们将深入探讨 Jamstack 是什么，了解这种方法在 2023 年的现状，并探索如何开始使用它。

Jamstack 是什么？
Jamstack 最初是由 Netlify 的首席执行官 Mathias Biilmann 在2015年创造的术语。最初它被设计成“JAMstack”，暗示了它所使用的技术堆栈：JavaScript，API 和 Markup。虽然术语的大小写已经发生了变化，但 Jamstack 最初被设想为一种构建网站的新方式，其中包括将后端系统与前端系统分离。例如，常见的设置是使用像 React 这样的前端库构建站点，并将其与一个 headless CMS 配对，使您可以从 API 中获取内容；在这种设置中，存储和提供内容所需的所有后端都由 CMS 单独管理。

但是，如今，Jamstack 涉及的远不止一系列技术；它是一种完整的 Web 开发架构和项目思维方式。它允许您通过客户端 JavaScript 和 API 的强大功能来创建功能丰富、完全动态的网站，同时利用静态生成的资产和部署到 CDN 的功能。

注：什么是Netlify？
Netlify 是一个 Web 开发和持续集成/持续部署平台，旨在使构建和部署高性能、现代 Web 应用程序变得更加容易。它提供了一个完整的工作流程，包括从 Git 仓库自动构建、部署和托管静态网站、前端应用程序和后端服务的工具。使用 Netlify，开发者可以轻松地将其代码部署到全球 CDN 并进行快速、可靠的网站或应用程序交付。除了它的主要功能之外，Netlify 还提供了一些其他的特性，例如网站分析、A/B 测试、表单处理等等。

注：什么是 headless CMS？
Headless CMS 是一种内容管理系统（CMS）架构，其中内容和其呈现形式是分离的。它是与传统 CMS 相对的概念，传统 CMS 通常包括一个集成的前端模板系统来管理内容呈现。相反，Headless CMS 只关注内容本身，并提供 API 接口来让开发者自由地创建自己的呈现层，例如前端 Web 应用程序、移动应用程序等等。这种架构使开发者可以更自由地设计和实现他们的用户界面，并更好地满足特定的业务需求。另外，Headless CMS 还具有可扩展性、可定制化和多通道发布等优点，因此受到越来越多开发者的青睐。

Jamstack 的核心原则
作为一种超越技术栈的架构，Jamstack 的核心原则包括两个方面：预渲染和解耦。在本节中，让我们更深入地了解它们，看看它们到底意味着什么以及它们为 Jamstack 生态系统提供了什么好处。预渲染是指在构建过程中提前生成页面，并将其作为静态文件存储在 CDN 中。这样可以提高页面加载速度和 SEO（搜索引擎优化）性能。解耦是指将前端和后端系统分离，使它们可以独立开发和部署，从而提高开发的灵活性和扩展性。这些原则使得 Jamstack 可以在构建高性能、可扩展和易于维护的现代 Web 应用程序方面发挥出色的作用。

预渲染
Jamstack网站的第一个核心原则是将前端事先生成为高度优化的静态HTML和CSS，而不是在任何用户请求到达服务器之前动态生成。这个预生成过程是在构建过程中完成的，通常被称为“构建时间”。这个预生成的输出文件会分布在全球CDN网络中，让用户无论在哪个地方都能快速、响应式地加载网页。当用户请求网页时，CDN只需要提供静态文件即可。

由于Jamstack网站生成为静态HTML和CSS文件，因此请求的响应时间更快，而且主机要求大大降低。主机要求降低，是因为一旦生成了文件，服务器就不需要进行进一步的渲染。这意味着部署预生成的静态网站非常快速和简便。这进一步得到了主机提供商（如Vercel和Netlify）和JavaScript框架（如Next.js和Gatsby）之间的紧密集成的支持，这些框架使构建Jamstack网站更容易。

解耦
解耦是 Jamstack 架构的第二个核心原则。这意味着将传统的单体应用程序分离出来，使后端服务与前端代码分离，它们通过 API 进行交互。例如，您可以使用 Stripe 的 API 集成付款提供者，并使用 headless CMS 轻松更新网站的营销内容。虽然一开始可能会感到头疼，因为需要管理项目的不同方面，但实际上它确实带来了一些重要的好处。

首先，它允许任何项目的单独部分独立地更换。以上面的例子为例，您可以将 Stripe 的 API 替换为 Paddle 的，而不需要更改有关内容管理的任何内容。这很重要，因为它意味着您可以使用更新或更适合的技术快速轻松地发展您的项目。在当今 Web 开发的快速演进速度下，这是一个很大的好处。

其次，将内容、代码和系统在项目中进行清晰分离，也使其更容易管理。与传统应用程序架构不同，在管理应用程序的不同部分的团队中，不需要共享一个代码存储库以进行更新和更改，这样可以更快地进行更新，减少潜在的冲突和问题。

使用 Jamstack 的好处
使用 Jamstack 生态系统有很多理由，但以下是一些从 Jamstack 驱动的项目中可以获得的最大好处：

安全性
由于前端和后端系统的解耦和只提供预生成的文件和资源，恶意攻击者可利用的攻击向量会减少。这意味着您的网站更安全，不太可能被攻击者成功攻破。解耦和与外部产品和服务的API集成的另一个好处是，您可以将这些集成的安全性外包给维护它们的团队和公司。这意味着在日常操作中，您需要关注和保护的内容更少。

可扩展性
如前所述，Jamstack 网站使用预生成技术，完美地适用于使用内容分发网络 (CDN) 而无需额外的复杂逻辑或工作流程。这意味着静态预生成站点可以快速、轻松且自动地分布到全球，使您的网站轻松扩展并处理所需的负载。

这一切都归功于 CDN 的工作原理和结构。通过使用 CDN，您可以在全球范围内部署多个服务器来处理来自每个服务器最近的用户的请求。这意味着您可以处理比传统应用程序中只有一个中央服务器处理所有用户对您网站的请求要多得多的流量。

性能
与前面提到的类似，由于 Jamstack 网站是预生成的，所有页面在用户请求时都已经生成好并准备好发送给用户；在用户收到响应前不需要在服务器上组装任何内容。这意味着当用户请求你网站上的某个页面时，距离他们最近的 CDN 可以快速响应最新生成的页面。这一点很重要，因为页面加载时间越长，用户就越有可能按下返回按钮，从而导致你失去一个潜在的客户。

维护性
Jamstack架构使得托管变得更简单，由于JavaScript框架与像Vercel和Netlify这样的托管平台密切集成，因此维护任务的时间和复杂性也大大降低。当Jamstack构建完成且预生成的文件部署后，您的网站或应用程序不需要您运行任何服务器或对其进行维护。所有这些意味着您不再需要一个专门的团队来维护服务器和基础设施以防万一发生意外。

开发者体验
Jamstack生态系统以其广泛的强大工具而闻名，这些工具可用于生成和构建网站。这些工具和技术不依赖于专有技术，而是通常使用具有自己充满激情的开发者社区的开源技术。作为这种热情的附带产物，许多这些工具的文档和入门流程都很流畅，是开发人员的良好体验。

可移植性
最后，由于Jamstack网站是预生成的，因此可以从大量服务和产品中进行托管。基本上，如果它能托管静态网站，那么它可能能够托管Jamstack网站。这意味着由于需要特定功能而被限制在有限的提供商中的日子已经过去了，您可以自由地在托管服务之间移动产品，而不需要进行复杂的迁移。

2023年是否应该使用Jamstack？
Jamstack架构已经成为技术世界中的一种事物，即使你能够使用它，并不意味着你一定应该使用它。虽然在技术上，绝大多数网站类型都可以使用Jamstack构建，但某些类型的网站比其他类型更适合使用该架构。在其最纯粹的意义上，Jamstack主要用于静态类型的网站，例如营销或信息网站和博客等。

然而，一个重要的趋势是利用像Next.js这样的JavaScript框架的强大功能，同时仅对网站的部分部分进行预渲染，其中动态或新鲜数据不是很重要，从而保留了Jamstack可组合架构的优点（其中JavaScript与API相结合，可以获得上述许多好处）。

预渲染变革
虽然 Jamstack 强调预渲染，但并非总是可行或令人满意的。这是因为如果您想在构建时预渲染页面，需要在构建时提供数据，这并非总是可能的。另外，当页面需要使用非常新鲜的数据（比如电商网站上的库存水平）时，预渲染可能会导致访问者看到陈旧或不准确的信息。

在2023年，有一些解决方案可以解决这个问题，例如 Next.js 的增量静态再生成或 Gatsby 的延迟静态生成，但值得注意的是，有时预渲染并不是最佳解决方案，并且这些解决方案也有自己需要考虑的问题。而且在2023年，总体趋势是（尤其是在更复杂的网站上）转向使用服务器端渲染（SSR），即在每个新的用户请求时实时渲染网页，而不是预渲染。

这种从预渲染转向 SSR 的趋势有很好的理由，因为 SSR 仍然提供了大部分预生成的好处，但您也可以使用最新可用的数据来渲染页面。当然，SSR 也有缺点，因此考虑如何有效利用渲染方法是很重要的。

您应该为现有项目使用 Jamstack 吗？
对于现有的网站项目，你应该采用Jamstack吗？你是否应该立刻放弃一切，迁移到Jamstack？老实说，很难给出一个清晰的答案，因为就像技术领域的许多事情一样，这取决于具体情况。这取决于Jamstack为您、您的业务和最重要的是您的项目带来的价值是否足以使迁移的成本值得。例如，如果您的整个团队已经习惯了其他架构，比如WordPress，或者预渲染不适用于您的项目，那么转换到Jamstack所需的成本和时间投资可能不值得您获得的好处。但是，即使预渲染不适用于您的项目，您对Jamstack的了解也可能会让您意识到组合API和JavaScript框架的好处。

开始使用 Jamstack
当你想要在项目中使用 Jamstack 生态系统时，首先需要根据我们在本指南中提到的要点判断 Jamstack 是否适合你和你的项目。或者，如果你只是想尝试 Jamstack，可以跳过这一步，直接开始一个项目。

在确定 Jamstack 生态系统适合你之后，下一步是选择一个可以进行预渲染的框架，如 Next.js、Gatsby 或 Nuxt。选择一个框架后，就可以开始构建新的 Jamstack 网站（如果不是新项目，可以迁移现有的网站）。然后，需要确定哪些类型的 API 可以在你的网站中使用。你有一个电子商务网站吗？可以尝试使用 Stripe 和 Snipcart 等 API。你的网站有很多内容丰富的页面吗？可以探索像 Prismic 这样的无头解决方案。

注：什么是Next.js、Gatsby、Nuxt？
Next.js是一个基于React的Web应用程序框架，它提供了很多特性，如自动代码分割、服务端渲染和静态站点生成等，让开发者能够更快、更容易地构建高性能的React应用程序。Gatsby是一个基于React的静态网站生成器，它使用GraphQL来获取数据，并在构建时预渲染静态HTML和CSS。这使得Gatsby生成的网站非常快速，同时还具有良好的搜索引擎优化（SEO）和可扩展性。

Nuxt是一个基于Vue.js的应用程序框架，它使用Vue.js的核心功能，并在此基础上添加了很多有用的功能，如服务端渲染、静态站点生成和异步数据加载等。这些特性使得Nuxt成为构建高性能、可扩展、易于维护的Vue.js应用程序的理想选择。

注：什么是Stripe，Snipcart，Prismic？
Stripe是一家提供支付解决方案的公司，它使网站和应用程序可以轻松地处理信用卡付款。它提供了一个安全的支付系统，可以轻松集成到网站和应用程序中。Snipcart也是一家提供电子商务解决方案的公司，可以为网站和应用程序提供全功能的购物车和结账体验。它与许多流行的CMS和开发框架兼容，并且可以轻松地集成到现有的网站和应用程序中。

Prismic是一个内容管理系统（CMS），可以让网站和应用程序所有者轻松地创建和管理内容。与传统的CMS不同，Prismic采用了Headless CMS的架构，使网站和应用程序开发人员可以更加灵活地管理内容和前端展示。它还提供了一个API和工具，可以帮助开发人员轻松地将内容集成到网站和应用程序中。

当然，如何构建或迁移你的网站将取决于你选择使用的具体技术，因为每种技术都有不同的工作方式。例如，一个 Next.js 项目的设置和工作流程将与 Nuxt 项目不同。如果你刚开始构建 Jamstack 网站和应用程序，建议从一个相对简单的网站开始，比如一个营销网站和/或博客，以了解概念和工作流程。

结束
总的来说，Jamstack架构是现代Web开发的重要组成部分，它将长期存在。但是，它是否适合您和您的项目取决于许多因素，例如：它是新项目还是现有项目，迁移成本，或者是否对其利益感兴趣。如果对于您和您的项目来说，这些因素都很好，则值得进一步调查和了解这种架构。如果然而，这些利益并不与您的业务和/或项目真正相符，迁移的成本/影响过大，则现在可能不适合选择它。