SSG的核心是在构建时将数据与模板一次性“拍平”为物理存在的HTML文件，不依赖运行时环境或后端服务；其构建过程包括读取内容源、解析Front Matter、调用getStaticProps、模板渲染并写入文件系统，最终输出可直接部署至CDN的静态文件。
SSG 的核心不是“生成 HTML”，而是「在构建时把数据和模板一次性拍平成 HTML 文件」——它不依赖运行时环境，也不需要数据库或后端服务，所有页面在 next build 或 hugo 执行完那一刻就已物理存在。
SSG 构建时到底发生了什么？
不是边请求边渲染，也不是启动一个服务器来拼 HTML。构建过程是纯函数式、无状态、可复现的一次性流水线：
- 读取所有内容源（
content/posts/2024-01-01-hello.md、data/products.json、甚至fetch()调用的 API） - 解析 Front Matter（必须用
---分隔，否则title字段永远是undefined） - 调用
getStaticProps（Next.js）或range循环（Hugo）注入数据到模板 - 用模板引擎（如 Liquid、Go Template）将数据代入
layouts/post.html，输出完整 HTML 字符串 - 写入文件系统：每个路由对应一个真实存在的
.html文件（比如out/blog/hello/index.html）
一旦构建完成，这些文件就能直接扔进 Nginx、S3 或 CDN，连 Node.js 进程都不需要。
为什么 getStaticPaths 必须返回字符串数组？
Next.js 的 SSG 动态路由（如 pages/blog/[id].js）要求你提前告诉它“哪些 [id] 是真实存在的”。这不是建议，是硬性约束 —— 因为构建时就要为每个路径生成独立 HTML 文件。
立即学习“前端免费学习笔记（深入）”；
- 返回
['1', '2', 'hello-world']→ 生成blog/1/index.html、blog/2/index.html、blog/hello-world/index.html - 返回
['/blog/1', '/blog/2']→ 构建失败，getStaticPaths只接受路径参数值，不是完整 URL - 返回空数组
[]→ 该页面不会被生成，部署后访问直接 404（不是 SSR 回退） - 使用
fallback: false时，用户访问未声明的路径会立刻 404；设为true则触发 SSR 回退，但这就不再是纯 SSG 了
Front Matter 解析错位会导致整个页面元信息失效
几乎所有 SSG 都靠识别分隔符来切开元数据与正文。但分隔符不是装饰，是解析器的锚点：
- Hugo 默认只认
---，哪怕你在文件里写+++，.Date和.Title仍为nil - 字段名大小写敏感：
date:可被 Hugo 识别，Date:就是另一个未定义变量 - YAML 缩进错误（多一个空格、tab 混用）会导致解析中断，后面所有字段都丢失
- Markdown 解析器（如
remark）若没配好yaml插件，会把整块 Front Matter 当作普通段落渲染成 HTML
验证方式很简单：构建后打开生成的 HTML，搜索 <title> —— 如果还是空的，问题八成出在 Front Matter 解析环节，而不是模板里漏写了 {{ .Title }}。
SSG 不等于“不能动”，但更新逻辑必须前置
很多人误以为 SSG 页面改了就得全站重构建。其实只要把“变化”转移到构建前，就能保持静态本质：
- 不要在模板里写
fetch('/api/latest')—— 构建时网络不可控，且违反静态前提 - 改用构建脚本预拉数据：跑
node scripts/fetch-latest.js把结果存成data/latest.json，再让getStaticProps读这个文件 - CI/CD 中把
fetch-latest.js放进prebuild钩子，就能实现“每日自动更新最新文章列表”，而无需改 SSG 架构 - 想支持秒级更新？那就不是 SSG 该干的事了 —— 该上 ISR（设
revalidate: 60），或者把动态部分拆出去用 CSR 加载
真正容易被忽略的，是「构建时的数据快照」这个概念本身 —— 它不是限制，而是契约。你交付的每个 HTML 文件，都明确对应着某一刻的数据状态。理解这点，才能不把 SSG 当成“过时技术”，而是当成一种可控、可审计、可回滚的内容发布机制。
