← 术语图鉴

术语 · 网页与浏览器

静态生成

Static Site Generation · 也叫 SSG / 静态站生成 / 预渲染

构建时就把每个网址对应的完整 HTML 生成好,有人访问时直接发出去。

你可能会说:

  • “能不能在上线前就把每个页面都做好,用户来了直接给?”
  • “博客这种不常变的内容,有没有又快又好被搜到的做法?”

它是什么

静态生成把"生成页面"这件事挪到了构建阶段:运行构建命令时,把每个网址都渲染成一个完整的 HTML 文件;部署时只需要把这堆文件交给托管平台或 CDN。

好处是快、便宜、稳:服务器不用运行你的代码,CDN 就能扛住流量;每张 HTML 里都有完整正文,爬虫和链接预览拿到就能读。

限制是内容在构建时就定下来了:内容一改就要重新构建,因人而异的页面(比如"我的订单")不适合纯静态生成,要配合接口或服务端渲染。

打个比方

像中央厨房提前把每道菜做好装盒,客人一点就递过去——又快又稳,只是菜单一改就得重新做一批。

在这个网站里

本站现在就是用 Astro 静态生成的:每篇文章、每节课在构建时各生成一个 HTML 文件,部署到 Cloudflare Pages。你正在读的这一页,右键"查看网页源代码"就能找到这段文字。

容易搞混的地方

常见误解

静态网站就不能有交互

正确理解

"静态"指的是 HTML 在构建时生成;页面照样可以带 JavaScript 做交互,课程里的找茬和快测就是例子。

常见误解

静态生成只适合很小的网站

正确理解

决定因素是内容多久变一次,不是页面多少。几万页的文档站也常用静态生成。

你可以这样告诉 AI

复制下面这段,贴给你的 AI

用静态生成(比如 Astro)做这个内容站:每个页面在构建时输出完整 HTML;只有少量需要交互的部分用脚本补上,不要把整页交给前端框架在浏览器里渲染。

对比着看

  • 单页应用——整个网站只有一个 HTML 空壳,所有页面都在浏览器里用 JavaScript 现场画出来。
  • 服务端渲染——每次有人访问时,服务器现场运行代码,生成这一页的完整 HTML 再发回去。

接着看

  • 站点地图——一份列出网站所有页面地址的清单文件,交给搜索引擎当作抓取目录。

在这些课里出现

相关的真实事故