JAMstack 站点现在在当前的Web开发世界中风靡一时。 理所当然！ 但它到底是什么，我们又该如何利用它的好处呢？

这个 Jamstack 是什么？

在具体回答这个概念之前，我们先来看几个符合Jamstack 风格的网站，用具体的例子来体验一下。

第一个网站，impossiblefoods， 这个网站是给大家介绍如何用植物制作有肉类口感的食物， 从而实现节能减排、绿色环保等目标。

抛开内容不谈， 这个网站的设计和交互，都是很好的， 很“现代化”的一个网站，例如看下面的时间线交互效果：

如果说这个网站的展示型内容还是很多的恶化， 那么来看另外一个网站freecodecamp(简称FCC）， FreeCodeCamp 是一个自由开源的学习编程的社区，致力于帮助人们利用零散时间学习编程。它的使命是 Learn to code and help nonprofits（学习编程，去帮助那些非盈利组织）。FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程，游戏化程度非常高，学员可以通过线上聊天室和线下社区活动（Coffee and Code）相互帮助。 可以说是类似于我们国内的传智播客。

先来看这个网站，内容虽然朴实无华，但是交互性还是很好的：

中文版：

在展开具体的学习时，里面的内容也非常详尽：

而这些内容，居然不是使用我们所熟知的React， Vue.js等技术开发的， 而是采用了Jamstack的技术栈，采用Gatsby.js等技术搭建的，如果大家有兴趣，可以去看创始人的介绍视频。

视频加载中...

下面是从视频里截选的FCC网站的三个架构阶段：

第一版

第二版

第三版

如果对比传智教育的网站， 那么可以说FCC的网站就是非常的轻量级，仅仅使用Gatsby.js以及一些后端API，结果就是，FCC在开发、运维方面具有极低的成本，这也是其竞争优势所在。

如果说， FCC 还不是很著名的话，那么来看看Google 的Web.dev，估计这会是一个 Web 开发人员喜爱的新项目。该项目的功能是通过可操作的指导和分析，帮助开发人员学习并将 Web 的现代功能应用到其站点和应用中。

项目主体分为两部分：Learn 和 Measure。

在 Learn 部分中，有不同教程指导开发者探索体系化的 Web 开发学习路径，了解有关构建现代化 Web 的相关信息。

Measure 部分用于监控应用，检查应用性能并获得有关如何改进的详细指导。

难以置信的是，这么一个功能复杂的一个网站， 居然也是采用Jamstack技术来构建的，具体而言使用的是11ty，而且代码也是开源的（/GoogleChrome/web.dev）。

看过了上面这些网站，我们可以看出， 这些采用Jamstack的网站，整体上跟我们平时所见的用Vue.js等开发的业务类网站，似乎也没什么区别，我们再来看，到底什么是Jamstack。

什么是Jamstack

首先，Jamstack 是一种构建网站和 web 应用程序的新方法。Jamstack 的 Stack 指的是许多独立，但是可以组合的技术层。当它们结合在一起时能够提供一个完整的 web 应用。

Jamstack 架构中的 JAM 是指客户端 JavaScript、可重用的后端 API，和用户界面的 Markup，比如 HTML 与 CSS。

Jamstack 的关键特征是前端 Web UI 与基于 API 的后端服务之间的清晰区分。与垂直集成的传统 Web 应用程序不同的是， Jamstack 应用程序是模块化和分散式的：

• UI 可以通过静态网页服务器、CDN、甚至基于区块链的存储进行分发；

• 后端 API 服务可以部署在云上，也可以由边缘节点就近提供服务。

作为一个技术栈（Stack）而不是一个具体的技术，从技术栈比较的角度来看，用于开发 Web 应用程序的另一个常见技术栈是 LAMP (Linux, Apache, MySQL, PHP) 以后其后的 MEAN (MongoDB, Express.JS, Angular, Node.JS)。

LAMP 概览

从上面的图表可以看出，从应用开发者的角度，当使用 LAMP 技术栈时，有很多的组件可以安装，并且可以同时配置和维护。LAMP 应用的用户界面是由后端服务器动态生成的。绝大部分逻辑与计算都在服务器上。前端的浏览器只负责渲染。

MEAN 概览

MEAN堆栈是用于开发web应用程序的基于JavaScript的框架。MEAN以MongoDB、Express、Angular和Node这四种构成堆栈层的关键技术命名。

MongoDB-文档数据库

Express（.js）-Node.js web框架

Angular（.js）-客户端JavaScript框架

Node（.js）-主要的JavaScript web服务器

MEAN技术栈概览

MEAN堆栈有多种变体，如MERN（用React.js替换Angular.js）和MEVN（使用Vue.js）。MEAN堆栈是构建web应用程序最流行的技术概念之一。

JAM 概览

与 LAMP 、MEAN技术栈相比，Jamstack 在许多不同之处 ，这对开发者构建网站或 web 应用的方式有着深远的影响。从部署架构上讲，Jamstack 应用的用户界面是通过“编译”生成的静态网页，从而大大提高了性能，安全性，以及降低了服务端的复杂度与计算负载。

从开发者的角度来看，一些主要的区别包括:

• Jamstack 开发者不需要安装或管理操作系统(如 Linux)
• Jamstack 开发者不需要管理安全策略(服务器防火墙)
• Jamstack 开发者不需要安装或管理应用程序数据库(如 MySQL)
• Jamstack 开发者可以在不使用 HTTP (Web)服务器(如 Apache)的情况下部署 Web 站点或 Web 应用

总体而言，选择使用 Jamstack 创建网站和 web 应用有4个主要好处:

• 成本效益
• 性能改进
• 更好的安全性
• 更好的用户/开发者体验

Jamstack 由什么组成？

回到 Jamstack：它通常由 3 个组件组成：Javascript、API 和标记。 它的历史源于“静态站点”一词，但是Jamstack后续发展成为更有意义和更有市场价值。 虽然最终的产品都是静态站点，但是Jamstack 在产生静态网站的每一个步骤都采用了一流的设计和工具，从而产生了独特的价值。

虽然您不需要使用任何特定的工具集，或者除了简单的 HTML 之外根本没有任何工具，但是有很好的示例可以说明堆栈的每个部分是由什么组成的。 让我们深入了解每个组件。

Javascript

为普及 JAMstack 做最多工作的组件可能是 Javascript。 我们最喜欢的浏览器语言允许我们提供所有动态和交互位，如果我们在没有它的情况下提供纯 HTML，我们可能没有这些位。

这是很多时候你会看到像 React、Vue 这样的 UI 框架和像 Svelte 这样的新来者发挥作用的地方。

React的简单示例，采用JavaScript

他们通过提供组件 API 和工具编译成一个简单的 HTML 文件（或一堆），使构建应用程序更简单、更有条理。

这些 HTML 文件包括一组资产，如图像、CSS 和最终通过您最喜欢的 CDN（内容分发网络）提供给浏览器的实际 JS。

API

利用 API 的优势是使 Jamstack 应用程序动态化的核心。 无论是身份验证还是搜索，您的应用程序都将使用 Javascript 向另一个提供商发出 HTTP 请求，这最终将以一种或另一种形式增强体验。

Gatsby 创造了“内容网格（Context Mesh）”这个词，如下图所示，描述了传统的全栈CMS和目前模块化的、无头CMS架构的区别

内容网格

您不必只联系一个 API 的主机，但您可以根据需要联系尽可能多的主机（但尽量不要过火）。

例如，如果您有一个用于托管博客文章的无头 Wordpress API，一个用于存储专业媒体的 Cloudinary 帐户，以及一个提供搜索功能的 Elasticsearch 实例，那么它们将协同工作，为使用它们的用户提供单一体验 你的网站。

Markup

这是关键部分。 无论是您手写的 HTML 还是编译成 HTML 的代码，它都是您提供给客户的第一部分。 这实际上是任何网站的一部分，但您如何提供服务才是最重要的部分。

要被视为 JAMstack 应用程序，HTML 需要静态提供，这基本上意味着不能从服务器动态呈现。

如果您将一个页面拼凑在一起并使用 PHP 提供服务，它可能不是 JAMstack 应用程序。 如果您从使用 Javascript 构建应用程序的存储中上传并提供单个 HTML 文件，它听起来就像一个 JAMstack 应用程序。

AWS S3 上 Gatsby 的静态输出

但这并不意味着我们必须始终在浏览器中构建 100% 的应用程序。 像 Gatsby 和其他静态站点生成器这样的工具允许我们在构建时提取部分或全部 API 源并将页面呈现为 HTML 文件。

想一想如果您有一个 Wordpress 博客，我们可以提取所有帖子并最终为每个帖子创建一个新的 HTML 文件。 这意味着我们将能够直接向浏览器提供页面的预编译版本，这通常等同于为您的访问者提供更快的首次绘制和更快的体验。

介绍到这里， 对于Jamstack的基本概念，已经介绍的差不多了， 下面就来看看，如何构建一个具有Jamstack风格的网站。

开始尝试Jamstack，我可以使用哪些工具来构建 JAMstack 站点或应用程序？

构建您的应用

这是有趣的部分。 你打算如何构建你的应用程序？ 这里有一些流行的开始，但绝不是详尽无遗的。

• 11ty （喜欢Go语言的，可以尝试这个，目前Google力荐）
• Gatsby
• Hugo
• Nift
• Scully (如果喜欢 Angular 的话，不妨尝试这个)
• Gridsome(Vue.js构建，熟悉Vue.js的可以尝试）

后续会专门写几篇文章，介绍如何使用这些Jamstack 工具来创建网站