什么是 JAMstack?

JAMstack 是一种主要使用 JavaScript、API 和标记 (HTML/CSS) 构建快速、轻量级 Web 应用程序的方法。

学习目标

阅读本文后,您将能够:

  • 定义“JAMstack”
  • 说明 JAMstack 应用程序的工作原理
  • 描述使用 JAMstack 方法的好处

相关内容


想要继续学习吗?

订阅 TheNET,这是 Cloudflare 每月对互联网上最流行见解的总结!

参阅 Cloudflare 的隐私政策,了解我们如何收集和处理您的个人数据。

复制文章链接

什么是 JAMstack?

JAMstack 是一种前端 Web 开发方法(构建用户与之交互的内容和界面)。它允许开发人员快速创建并有效地为用户提供静态网站。

在 JAMstack Web 应用程序中,会预先构建尽可能多的 HTML 并存储在内容交付网络 (CDN) 中。不同于在服务器端运行一个单一的后端应用程序来生成动态内容,应用程序的动态组件基于 API。理想情况下,这会带来更快的用户体验和更简单的开发人员体验。

术语“JAMstack”代表什么?

JAM 代表 JavaScript、APIs、Markup。

  • JavaScript 是网络应用程序使用的编程语言
  • API(应用程序编程接口)是一种从别人的程序或应用程序中请求数据的方式
  • Markup 是向浏览器提供格式化指示的代码(HTML 和 CSS)。

堆栈指的是将所有这些内容以一种方式结合起来,使开发人员能够构建应用程序和网站。

JAMstack 网站或应用程序仅使用这三个元素构建而成。用户看到的静态网站是由 HTML 和 CSS 标记代码构建的。JavaScript 用于任何必要的动态功能,以及调用 API。API 提供应用程序的后端。

假设 Bob 构建了一个提供欧洲足球比分更新的 Web 应用程序。Bob 创建了一个后端应用程序,该应用程序在他操作的服务器上运行,并不断检查最新比赛的得分。当用户打开 Web 应用程序时,Bob 的服务器会生成显示这些分数的 HTML 页面,然后将这些页面发送给用户。但是,Bob 的 Web 应用程序有点慢:在用户可以查看这些页面之前,他们必须等待后端应用程序运行、生成 HTML 并等待 HTML 到达他们的设备。

现在假设 Bob 使用 JAMstack 方法重建他的 Web 应用程序。他没有编写整个后端应用程序,而是创建了一系列轻量级的 HTML 页面,并将其存储在 CDN 中。当用户打开应用程序时,CDN 会立即将相应的 HTML 页面交付给用户,因为 CDN 比 Bob 的服务器更接近用户。该应用程序还调用 API 来填写页面上的实时足球比赛比分。Bob 的 Web 应用程序现在为用户加载的速度非常快,从 Bob 的角度来看,编写代码来处理后端、服务器端更新分数的工作的需求要少得多。

什么是静态网站?

静态网站由一个或多个静态网页组成,这些静态网页是在浏览器中加载的 HTML 文件,不管谁加载这些文件,它们在浏览器中加载的方式都是一样的。因为静态网页仅由 HTML 组成,不需要在浏览器中运行额外的代码,它们可以非常快速地加载。(要查看 HTML 代码的外观,请在使用 Chrome 浏览器时右键单击网页,然后单击“查看页面源代码”。)

相比之下,动态网页每次加载时都是不同的。为了提供更具交互性、个性化的用户体验,动态网页会根据打开页面的用户、页面加载位置、一天中的时间以及一些其他变化的数据输入而变化。加载动态网页时,代码必须在托管网页的 Web 服务器上或在用户的浏览器中运行。这种对运行代码的依赖会降低用户体验。

动态网页并不是创建现代化用户体验的唯一方式。一个主要是静态的 JAMstack 网站仍然可以通过偶尔生成新的静态内容或调用 API 来填写更新的内容,为用户提供动态的个性化体验。

JAMstack 应用程序如何处理后端功能?

在应用程序开发中,后端是在后台服务器上运行的代码。通常,用户在使用网站或应用程序时并不知道后端发生了什么。虽然 JavaScript 和标记决定了 JAMstack 应用程序向用户显示的方式,但它仍然需要后端函数才能工作。JAMstack 通过使用 JavaScript 调用 API 来处理这个问题。

使用 API 意味着 JAMstack 开发人员不必构建自己的后端应用程序。他们可以在现有 API 的基础上构建他们的网站和应用程序。

当开发人员想要为应用程序构建自己的功能时,他们可以创建新的 API。API 可以在各种环境下重用,因此当开发人员为后端构建自己的 API 时,他们应该只需要构建一次该功能,以便在未来的应用程序中使用它。

JAMstack 与微服务有何关系?

使用 API 允许 JAMstack 开发人员对后端采取微服务的方式。在微服务架构中,应用程序的后端被分解为在命令上运行的更小的块——就像 JAMstack 应用程序在必要时调用各种 API 一样,但在其他情况下不需要后端支持。

也可以构建一个使用部分或完全无服务器后端的 JAMstack 应用程序。无服务器函数是按需运行的小型、可重复使用的代码片段。但是,无服务器架构通常需要开发人员对后端采取更加亲力亲为的方法,因为他们本质上是自己构建后端应用程序,而不是调用 API(尽管他们不必担心配置服务器)。

使用 JAMstack 有什么好处?

  • 性能:JAMstack 应用程序中的几乎所有内容都由从 CDN 提供的静态 HTML 文件组成。这是向最终用户提供 Web 内容的最快方式。
  • 可扩展性:如果应用程序是“可扩展的”,这意味着它可以很好地响应使用量的大幅增加。由于 JAMstack 前端速度快且后端轻量化,因此 JAMstack 应用程序通常具有极强的可扩展性。
  • 更好的开发人员体验:JAMstack 使开发人员能够专注于构建引人注目的前端用户体验,而无需担心后端或性能问题。

Cloudflare 使开发人员能够构建可直接在 Cloudflare 全球 CDN 上托管的应用程序。深入了解 Cloudflare Pages,这是我们用于构建静态网站的 JAMstack 平台。您还可以深入了解有关使用 Cloudflare Pages 部署 Gatsby 站点Hugo 站点React 应用程序以及更多应用的信息,并观看分析公司 Redmonk 提供的 Cloudflare Pages 概览视频