什么是 JAM Stack

这篇文章基于我于 2018 年 5 月 4 日在泽西岛🇯🇪 的一次本地网络开发聚会上发表的演讲。尽情享受吧！

JAM 堆栈

JAM 代表Javascript、API 和 Markup，这是一个带有嵌套首字母缩略词的首字母缩略词。🤓

jamstack.org将 JAM 定义为基于客户端 JavaScript、可重用 API 和预构建标记的现代 Web 开发架构。

然而，定义 JAM 的含义并没有给我们足够的深度，它背后有什么秘密吗？

让我们看一下 JAM 网站示例的文件结构：

正如你所见，这背后没有什么魔法。只是一些我们在项目前端经常看到的文件。

根据该文件结构，有些人甚至可能会试图争辩说Space Jam 的网站是一个 JAM 网站（剧透：它不是，它甚至不使用 CSS 😂）。

JAM 对我们如此有用的原因在于它的 Javascript 和 API 方面

JavaScript + API =

如果我们看一下使用Gatsby JS和Rachio Smart Sprinkler构建的 JAM 网站的一个例子，我们可以看到，对于最终用户来说，没有立即的视觉变化，该网站是静态构建的，并且仍然在 API 的帮助下提供完整的电子商务和结账流程。

我为什么要给自己找麻烦？

即使最终用户不会真正获得任何直接的优势，也有许多理由鼓励您在下一个项目中考虑采用 JAM 方法。让我们来看看其中的一些：

加载速度

无需数据库查询：由于网站的标记是在构建时构建的，因此每次页面请求时都无需进行数据库查询。这既节省了服务器负载，也缩短了整体响应时间。

无需模板解析：根据您的技术栈，您的代码库中可能存在一个模板文件，该文件会被解析并用于构建 HTML，并在每次页面请求时返回给浏览器。静态网站则不会发生这种情况，这意味着您可以通过将模板解析从请求/响应流中移除来节省服务器负载和响应时间。

关注点分离

前端负责所有演示

随着前端框架的普及度和功能的不断提升，将您的网站/应用程序的呈现与任何后端框架分离意味着您可以利用前端堆栈提供的所有功能，从而为您的最终用户提供更好的体验。

集中式/重点式用户体验设计

同样重要的是，如果您不需要担心应用程序的后端如何处理其数据和业务逻辑，那么您可以集中更多的精力确保您的用户体验达到您想要的水平和最终用户期望的水平，而不会受到后端解决方案施加的任何潜在限制。

内容更新频率

我们多久真正更新一次所有页面？

这一点经常被忽视。我们的很多页面，例如联系页面、条款和条件、博客文章，内容很少更新。

您可能会在此类页面发布后不久对其进行几次更新，以修复潜在的拼写错误或不一致之处，但一旦该期限过去，您可能就不会再编辑该页面，那么为什么不静态构建它并为您的服务器省去在每次请求时编译此页面的麻烦呢？

频繁更改的内容可以使用 API

如果您的页面仍然需要提供动态或时间敏感的内容，您可以使用 API 在页面加载后更新该内容，并可能在客户端缓存该内容，或者（不太理想）在页面加载后包含该内容。

无需到处实施

无需一次性将整个申请移至 JAM。

JAM Stack 你的博客

如上所述，某些页面在发布后不太可能发生变化，因此将其设为静态将为最终用户提供更高的性能和更好的体验。

用户验证区域可以保持非 JAM 状态

如果您的应用程序具有某种需要保持动态的经过身份验证的区域，那么您可以在JAM应用程序时跳过该部分。

逐步迁移到 JAM

本节的要点是，您可以慢慢地将内容迁移到静态构建，并在应用程序中确定 JAM 方法的机会时引入更多 API 支持的动态内容。

与服务工作者、SPA 和动画页面转换相结合

JAM 堆栈使我们更容易将新的 Web 工作流包含到我们的应用程序中，例如Service Workers、单页应用程序框架和页面之间的动画转换。

离线支持

使用 Service Worker，您可以让用户在离线状态下也能访问您网站的部分或全部内容。这项功能非常棒，尤其当您的核心市场是游客或网络连接不佳的用户时，这项功能尤为重要。

在构建时将更新推送给服务人员

正如我之前所说，有些页面发布后内容很少会发生变化，但如果发生更改，您可以使用 Service Worker 根据需要重新验证内容。这将确保您的最终用户始终在其设备上获得最相关的内容。

页面转换使用户体验更加流畅（就像在本机应用程序上一样）

这似乎并非静态网站和基于 JAM 的网站的一大关键特性，但如果你仔细想想一些原生应用在不同区域之间过渡的流畅程度，就会不禁想到，我们也能将同样的效果应用于 Web 应用，这着实令人兴奋。如果你需要一些灵感，可以参考Sarah Drasner的页面过渡示例。

缓存

最后，缓存静态构建的网站比动态网站更有效，因为您可以缓存网站的所有方面，并且根据您的内容类型，可以将缓存设置为极长的到期日期。

对于网站中需要动态的任何部分，您可以使用 JAM 的 Javascript 和 API 方面在页面加载后提取内容。

注意事项

与我们领域中的大多数事物一样，在构建基于 JAM 的应用程序时，也需要权衡利弊，或者至少需要牢记一些事项。我上面已经提到过这些，但为了将所有这些内容都放在一个章节中，构建 JAM 应用程序时需要考虑的一些注意事项如下：

电子商务和极其时间敏感的内容

如果您的内容极其注重时效性，并且严重依赖后端解决方案，那么 JAM 可能并非最佳选择。一种规避方法是使用 API 在前端更新内容，但这并非总是可行。

必须实现 SSR

这背后有很多原因，但始终建议您至少在构建时为您的内容实现某种服务器端渲染逻辑。

确保没有 JS 支持（如果相关）和 SEO 最佳实践

我知道这听起来可能有点过时，但根据你的目标受众或你希望交付应用程序的用户比例，实现无 JS 支持可能非常重要。值得一提的是，与完整的应用程序相比，无 JS 支持可能会略有不足，但至少要为无 JS 用户提供某种一致的体验，这一点很重要。

根据网站或应用程序的类型，您还需要确保在搜索引擎优化 (SEO) 方面覆盖面广。如果没有人发现，即使拥有一个优秀的网站也毫无意义。

应用程序的已验证区域

您网站上已验证的区域可能并不总是与 JAM 方法兼容。同样，API 可以为您提供帮助，但具体情况由您自行决定。

对此的一些建议是使用 SSR 来访问您网站的 chrome，并可能添加一些占位符标记以表明仍在使用 AJAX/API 获取用户特定内容。

我如何才能加入 JAM Stack 炒作列车？

既然您已经了解了 JAM 的一些优缺点，不妨亲自尝试一下。构建基于 JAM 的网站有很多方法，而且大多数方法都给人一种静态网站的感觉。

我编制了一份清单，其中列出了一些您可以尝试的选项，但这绝不是一份完整的清单，只是我过去遇到过或自己使用过的东西。

React JS

React 可能是目前使用最广泛的前端框架，如果你了解 React，你可能对所有这些选项都了解。无论如何，以下是一些可以用来构建 JAM 技术栈的工具：

• create-react-app ：出色的零配置 React 应用程序脚手架，一旦需要更多自定义功能，就可以弹出您的应用程序。
• GatsbyJS：一个用于 React 的静态站点生成器，具有内置的 GraphQL 数据层，并能够在构建时从 React 组件构建静态 HTML。
• Next.js：一个支持静态站点的服务器渲染 React 应用程序框架。

Vue.js

Vue 也是一个前端框架，其受欢迎程度和采用率正在迅速增长。如果您正在使用 Vue，可以使用以下一些工具来构建 JAM 应用：

• Nuxt：通用 Vue JS 应用程序框架，通常被称为 Next.js 的 Vue 版本，
• VuePress：Vue 的静态站点生成器。
• eagle.js：用 Vue.js 构建的可破解幻灯片框架（用于创建我的演讲幻灯片🤓）。

其他选择

• Jekyll：基于 Ruby 的静态站点生成器，广泛用于GitHub Pages。
• Hugo：基于 Go lang 的静态站点生成器。
• StaticGen：StaticGen 提供了静态站点生成器列表，您可以根据自己的喜好或需求对其进行排序和筛选。
• 构建您自己的：除了NIH 综合症之外，如果您需要一组非常具体的功能，您可以随时构建自己的静态标记并以适合您的业务和需求的方式将其与您的 API 集成。

JAM 友好的后端解决方案？

JAM 技术栈的另一个重要方面是确保您的后端解决方案能够与前端框架良好集成，并提供可从应用程序前端/客户端利用的 API。以下是一些可以帮助您实现这一点的框架和服务示例：

• 无头 WordPress：使用 WordPress 作为 CMS 并不一定意味着您需要直接使用它来生成网站的标记。API-first/Headless WordPress 越来越受欢迎，并且市面上有很多插件和库可以帮助您入门。
• Netlify CMS：基于文件的 CMS，可以直接插入到您的版本控制和构建工作流程中。
• Prerender：适用于您的应用程序的 SEO 友好插件，可确保您的网站能够被搜索引擎正确抓取
• 您当前选择的框架：对于所有 CMS/框架来说这可能并不那么明显，但您很可能已经可以构建一个 JAM 网站并与您当前的后端解决方案集成，可能通过使用 REST 和/或 GraphQL。

结论

感谢您阅读我的帖子。JAM 堆栈非常棒，我相信它是我们前进的最有效途径。当您开始下一个项目时，可以考虑尝试一下 JAM 堆栈，或者考虑使用 JAM 重建当前设置的部分内容，您不会失望的。😉

可能有很多事情我没有谈到（因此不属于这篇文章的一部分），请随意在评论中提及我可能遗漏的内容。

我的演讲的一些灵感来自于 JAM Stack 上的另一篇dev.to帖子，我建议你看看：

什么是 JAMstack 以及为什么你应该尝试它

礼物 Egwuenu ・ 2018年4月16日

#jamstack #staticsites #netlify

我的演讲幻灯片可以在这里查看，你也可以查看包含幻灯片代码的 Github repo。干杯🤓