什么是Jamstack？颠覆网页开发的静态网站革命

了解Jamstack如何将现代开发实践与老式的静态网页相结合，从而使开发人员能够更快地建立快速网站。

InfoWorld特约撰稿人

Anna Usova / Getty Images

显示更多

Jamstack是一种流行的网络开发理念，旨在加快网络开发和下载网页的时间。借鉴devops和CI/CD，Jamstack颠覆了长期以来用于构建交互式网页的技术，将负载时间的代码执行从网络服务器转移到浏览器内的JavaScript和通过API访问的外部服务。最终的结果是采用一种对开发者友好的方法来构建静态网站，这些网站可以快速渲染，并且可以很容易地为多个平台定制。

[InfoWorld上还有：Vercel、Netlify和无服务器PaaS的新时代] 。

Jamstack架构

Jamstack是一种基于三大支柱的Web应用架构，这也是其名称中的首字母：JavaScript、API和标记。Jamstack网站上的网页由标准的标记语言组成，因此它们可以在任何地方建立和测试，而不依赖于应用服务器或服务器端技术，如Node.js。任何互动功能都由在浏览器中执行的标准JavaScript代码提供，它通过HTTPS调用可重用的API。这些调用被用来访问外部数据或任何其他不能建立在网页本身的功能。

为了理解为什么Jamstack是革命性的，考虑一下LAMP堆栈，它体现了大多数开发者在过去15年里对网络开发的思考方式。LAMP代表Linux（为大多数网络服务器提供动力的操作系统）、Apache（运行在这些Linux机器上的服务器软件）、MySQL（存储网络应用程序数据的数据库）和PHP/Perl/Python（用于编写服务器端代码的语言）。当你把浏览器指向一个基于LAMP的网站时，Web服务器就会执行服务器端代码，在运行中生成网页，根据需要从MySQL数据库中提取数据。

LAMP架构让开发人员能够创建动态和互动的网站，但它也需要一个强大的网络服务器--网站的流量越大，它需要的服务器端计算能力就越强。即使有一个功能齐全的服务器，动态网页也需要很长的时间来建立和加载。在一个注意力短暂的世界里，人们经常在手机上浏览网页，这种延迟已经成为一个主要的痛点。

Jamstack是作为静态网站运动的一部分而诞生的，它产生于2010年代中期，是对这种传统的网站工作模式的反应。要了解Jamstack，你需要了解静态网站背后的技术。

静态网站和Jamstack

如果你必须向一个完全陌生的新手解释网络是如何工作的，那可能会是这样的。在网络服务器文件系统的某个地方有HTML文件，可以通过HTTP地址访问，网络浏览器下载这些文件，然后解释这些文件以创建一个网页。但这是对一个静态网站的描述。它假定当网络浏览器去寻找HTML文件时，这些文件已经存在。但在过去的十年中，大部分的网络都是由动态网站主导的，这些网站根据网络请求，通常根据通过表单或URL本身传递给网络服务器的参数，在运行中生成HTML文件。

静态网站生成器

在网络的早期，当网页总是静态的时候，许多网络开发者用手写HTML代码。随着网页越来越复杂，像Macromedia的Dreamweaver这样的工具出现了，并开始以编程方式生成静态HTML网页。随着静态网站运动的兴起，新一波的静态网站生成器开始出现，包括Gatsby、Hugo和Jeckyll。与Dreamweaver等所见即所得的工具不同，静态网站生成器是命令行驱动的，旨在与CI/CD流程很好地整合。这些工具生成HTML文件，通常基于用Markdown编写的内容，并自动上传到GitHub这样的版本控制库。当这些文件被标记为可用于生产时，实时网站上的静态页面会自动更新。

内容交付网络

需要记住的一件事是，在这种情况下，静态并不意味着简单的没有互动的Web 1.0页面。这些页面可以包括在浏览器中执行的高级JavaScript，并对数据库、服务器端功能或托管无服务器功能进行API调用。但是，由于这些执行都不发生在网络服务器上，所以静态网站不需要一个带有数据库的工业动力网络主机。许多静态网站被部署到内容交付网络（CDN）上，内容被镜像到世界各地的多个服务器上，以便快速交付给任何地方的用户。

Snipcart的营销负责人Mathieu Dionne在一篇博文中描述了这个静态网站新世界的早期，并提到在2015年左右，"Netlify的创始人......刚刚想出了'Jamstack'这个词，以解决'静态网站'的负面含义"。

我们在本节中已经描述了Jamstack的过程。现在，让我们简单地讨论一下Netlify和它在Jamstack生态系统中的作用。

Netlify和Jamstack

Netlify是一家云计算和网络托管公司，它的联合创始人Mathias Biilmann创造了Jamstack这个词。Netlify的服务是为那些想在Jamstack理念基础上建立网站的客户量身定做的。

Netlify声称已经破解了一个阻碍静态网站发展的具体问题，那就是缓存失效。数据库驱动的动态网站可能会消耗大量的服务器资源，但你可以肯定的是，它们会将你的网站的最新版本提供给任何停下来的访问者。由于Jamstack网站通常托管在CDN的多个分布式服务器上，所以更新就不那么简单了。每个CDN服务器可能需要几分钟到几小时的时间才能发现其缓存的网站版本不再有效。为了解决这个问题，Netlify的CDN为HTML文件提供即时的缓存失效。

在Netlify举起Jamstack旗帜的几年里，该公司已经将该技术作为其PaaS产品的支柱，为耐克和Peleton等大公司提供内容平台。

Jamstack与Gatsby

Netlify并不是Jamstack领域唯一的托管供应商，而且它对这个词没有任何形式的商标或专有控制权。有各种各样的Jamstack托管和部署解决方案，大多数大的云计算供应商都在参与这个行动，包括亚马逊网络服务、谷歌Firebase和微软Azure。其他更专业的公司也进入了这个领域，包括Gatsby公司，同名静态网站生成器的创造者。

Gatsby（公司）已经在Gatsby网站生成器的基础上建立了一个高水准的服务产品。由于它的开放源码，Gatsby网站生成器也被其他服务提供商提供，包括Netlify。

[也在InfoWorld上：亲身体验GatsbyJS] 。

无头CMS

当然，建立和托管一个网站仅仅是个开始，如果你曾经管理过一个网站，你就会知道。你还需要一种方法来创建新的内容并将其添加到你的网站。因为做这些工作的人通常不是程序员，他们需要一个用户友好的工具，即内容管理系统，或CMS。传统的内容管理系统，如WordPress，提供一个后端用户界面（UI），你可以输入网站内容，管理存储这些内容的数据库，并建立动态网页，以响应浏览器的请求。

Jamstack网站的CMS工作方式不同，它们通常被称为无头CMS。无头CMS提供了一个输入和管理内容的用户界面，以及一个数据库或其他存储内容的方法，但本身并不生成HTML代码供浏览器解析。相反，网站的静态HTML页面使用JavaScript来调用CMS的API，而CMS则以JavaScript可以转化为网页的格式返回内容。

这个系统彻底地将内容和表现形式分开，当然这也是编程的一个长期理想。因为CMS有一个可访问的API，所以多个网页可以轻松地使用它。例如，如果你建立了独立的移动、桌面和智能手表版本的网站，所有这些版本都可以访问存储在CMS中的相同内容。

如你所料，Netlify在这个领域有自己的产品，叫做NetlifyCMS，但也有其他的产品；开发者Nebojsa Radakovic在他的无头CMS介绍中对它们进行了分析。在这个名单上有很多新兴的公司，也有一个非常熟悉的名字。虽然我们用WordPress作为传统CMS的例子，但它也可以作为无头CMS运行，为Jamstack网站提供动力。

为什么使用Jamstack？

我们已经提到了使用Jamstack的许多好处，但现在你已经有了一个全面的了解，这值得重述一下。

速度：静态网站的加载速度更快，这不仅仅是一个方便的问题。谷歌通过降低搜索排名来惩罚速度慢的网站，如果步骤加载缓慢，习惯于快速响应的客户往往会放弃电子商务交易。
开发人员的经验。开发人员可以使用改变了行业实践和生产力的devops技术来构建静态网站。而Jamstack理念产生的网站堆栈将关注点干净地分开，使开发人员能够专注于他们的专业领域：前端设计师和开发人员可以建立网站而不需要精通服务器端语言，而后端开发人员可以专注于API。内容问题则完全由CMS来处理。
灵活性。静态网站可以由传统的网络服务器、CDN、专业服务或三者的某种组合来托管。由于无头CMS通过API与前端互动，你可以轻松地为多个平台建立共享相同内容的网站。

何时不使用Jamstack

有了所有这些好处，仍然需要说，Jamstack并不适合所有人。Jamstack是为开发者需求而定制的，其反面是，如果你想运行一个基于Jamstack的网站，你将比你想要的更依赖开发者。这对那些已经拥有或愿意雇用一个具有Jamstack所需技能的专门的网络开发团队的公司来说，并不是那么糟糕。但是，许多小型商店习惯于使用现成的商业或开源软件，让他们在运行网站时几乎不需要开发人员的参与。特别是电子商务网站，往往依赖多年来为传统的虚拟主机解决方案开发的各种插件和库；它们的Jamstack等价物并不那么广泛或成熟，这意味着Jamstack不一定适合电子商务。

Jamstack受欢迎吗？

尽管围绕着它的炒作，Jamstack目前只支持所有网站中相当小的一部分。网络年鉴》估计，在2021年，由静态网站生成器构建的网站（几乎所有的网站都会按照Jamstack的理念构建）只占所有网站的1%左右。也就是说，Jamstack正处于快速增长期，在过去的三年里，其市场份额每年都在以两倍以上的速度增长。开发者对该技术兴趣增加的一大标志是：大约三分之一的Jamstack开发者是相当新的，他们的经验不到两年。

Jamstack教程

想更深入地了解？看看这些Jamstack开发者教程吧。

Hasura是一家专注于Gatsby和其他Jamstack平台所使用的GraphQL API系统的公司，它有一个很好的高级教程，带你一步一步地了解Jamstack网站的架构考虑和选择。
网络主机Digital Ocean有一个很好的使用Angular和Scully建立Jamstack组合网站的教程。
Netlify提供了一个视频教程，涵盖了从基础知识到更高级主题的很多内容，包括建立数据库驱动的Jamstack网站的介绍。

一旦你掌握了这里概述的基本概念，你就可以在你的网站上使用Jamstack原则和技术了。学习愉快!

什么是Jamstack？颠覆网络开发的静态网站革命