前端架构之 JAMStack

什么是 JAMStack

JAMStack(JAM 代表JavaScript,API 和Markup)是一种使用Static Site Generators(SSG) 技术、不依赖 Web Server 的前端架构。

它的核心是:不依赖 Web Server。

这看起来和把一个静态网站部署到文件服务器没什么区别。我理解,JAMStack = 现代 SSG 框架 + DevOps + Serverless,是一种「究极」的前后端分离。

激进的说,「Static is the new dynamic」。

cdn

一种有趣的比喻是:「CDN 优先应用程序」。

JAMStack 好在哪

  1. 高性能:由于网页是静态生成的,没有额外的网络数据请求,它的Time to first byte(TTFB)性能是最佳的(因为不涉及后端、数据库等等)。
  2. 易部署:因为 JAMStack 不依赖 Web Server,部署就仅仅是把生成的网页放到CDN就可以了。
  3. 强安全:同样因为不依赖 Web Server 的原因,就导致 JAMStack 网站的攻击面很小。
  4. 易开发:JAMStack 由于其特性,开发也极其简单,不强依赖后端,开发、测试仅仅是部署到一个静态文件服务器即可。现在「三大框架」都有相应的 SSG 方案,学习成本不高。

对比 Client Side Rendering(CSR),SSG 的 TTFB 有明显的优势;同时由于提前渲染,SEO 也更友好。

对比 Server Side Rendering(SSR),SSG 部署简单,直接放到 CDN 即可,不依赖 Node Server 动态渲染。TTFB 也优于 SSR。


Next.js的作者之一Guillermo Rauch提到,由于 JAMStack 的易部署特性,给整个前端的开发测试流程带了翻天覆地的变化:「The Deploy URL, the Center of Gravity」,即在开发、测试、验收等等的流程中,核心是围绕 URL。

  • UX 想看到现在开发的网页效果,开发只需要部署到一个暂时的 URL,然后把它发给 UX 就可以了;
  • 多个 feature 分支,测试都可以在自己独立的 URL 中实时看到效果;
  • E2E 测试、用户测试也独立在一个 URL 中;
  • 等等...

url2

如何实现 JAMStack

现在「三大框架」都有相应的 SSG 方案,既满足了多样化、复杂化的前端开发需要,又能简单的生成静态网页:

  1. Next.js是基于 React 的 SSR/SSG 框架。
  2. Scully是基于 Angular 的 SSG 框架。
  3. VitePress是 Vue 官方推出的 SSG 框架。

部署方面有VervelNetlify腾讯云云开发等等。

Ledge项目的实践

Ledge(源自 know-ledge,意指承载物)知识平台是基于我们所进行的一系列 DevOps 实践、敏捷实践、精益实践提炼出来的知识体系。

Ledge 网站使用 Angular 开发。作为一个类 Wiki 型的网站,它使用 Markdown 作为编写内容的语言,使用Ledge Framework动态的将 Markdown 转换为 HTML。这就涉及到,如果转换过程在浏览器进行,势必导致性能的下降,和对 SEO 的影响。

所以我们选择了Scully作为 SSG 框架,在 build 阶段依据路由将内容提前转换为 HTML 页面:

ledge
项目的开发部署流程

各方面性能都有了大幅提高:

data
对比 JAMStack 和 CSR

阅读 788

推荐阅读