认识 Jamstack 架构

传统架构 LAMP 或 MEAN Stack 中，每当用户请求一个页面时，服务器就会查询一个数据库，并将结果与页面的标记和插件中的数据结合起来，在浏览器中生成一个新的 HTML 文档，而这个过程会增加页面加载时间。

Jamstack 是由 Netlify 公司 2016 年提出的架构理念，JAM 具体含义是：

• JavaScript (J): 主要指运行在浏览器的逻辑代码，负责前端渲染、数据请求等逻辑(例如：React、Vue、Angular)；

• APIs (A): 可以通过 JavaScript 调用的数据接口 (例如GitHub API)；

• Markup (M): 用于页面构建的模板方案、站点生成器、构建工具 (例如Webpack)。

Jamstack 架构下，当用户请求页面时，不需要查询数据库，因为 HTML 文档在 CDN 静态缓存文件，如果有数据需求，会再通过 API 接口去获取。Jamstack 的实现依赖如下：

• 页面前后端分离
• 前端支持提前构建
• 基于 CDN Cache 来控制是否需要回源（常见基于 etag)
• 基于统一的 API 网关对接口进行管理

Jamstack 架构下的更多优化探索：

• 主文档加载并行 API Prefetch。
• 静态资源（JavaScript、CSS、图片）离线化。
• 对JavaScript编译结果进行 Cache
• 对域名进行长链接保活
• JAMstack + SSR 动静结合