[!info] related notes

• 所属 MOC: 前端基础 MOC, 前端工程化 MOC
• 前置概念: CDN 加速
• 并列概念: 客户端渲染（CSR）, 服务端渲染（SSR）
• 易混淆概念: hydration, 首屏加载优化
• 关系笔记: CSR、SSR 与 SSG

静态站点生成（SSG）

一句话定义

SSG（Static Site Generation）是在构建阶段提前把页面渲染成 HTML，访问时直接分发静态结果的渲染方式。

核心内容

• 页面内容会在构建或发布阶段预先生成，而不是等用户请求时再现场渲染
• 生成好的 HTML、CSS、JavaScript 通常直接放到 CDN 或静态托管服务中分发
• 因为访问时不需要逐请求渲染，首屏直出和分发效率通常都很好
• 如果页面还需要交互，客户端框架仍然可能在浏览器里做 hydration

最小例子

• 文档站、博客、营销页在构建时就把每个路由的 HTML 产出好
• 用户访问 /docs/getting-started 时，CDN 直接返回对应静态页面
• 页面展示后，如有搜索框、评论区或局部交互，再由客户端脚本接管

边界与易混淆点

• SSG 不等于“手写静态 HTML”，也可以由现代框架在构建期自动生成
• SSG 和 SSR 的核心区别不是有没有服务端，而是页面是否在请求前就已经生成好
• 内容变化非常频繁、强个性化、按请求定制的页面通常不适合纯 SSG
• 文档、博客、官网、活动页这类内容稳定、可缓存的页面更常采用 SSG

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC