前端架构之 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 优先应用程序」。

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 中；
• 等等...

如何实现 JAMStack

如今「三大框架」都有相应的 SSG 方案，既知足了多样化、复杂化的前端开发须要，又能简单的生成静态网页：

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

部署方面有Vervel、Netlify、腾讯云云开发等等。

Ledge项目的实践

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

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

因此咱们选择了Scully做为 SSG 框架，在 build 阶段依据路由将内容提早转换为 HTML 页面：

项目的开发部署流程

各方面性能都有了大幅提升：

对比 JAMStack 和 CSR