传统架构 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 动静结合