预渲染

预渲染（pre-rendering）是在请求到达之前就把页面生成为 HTML 文件，之后每次请求直接返回同一份文件的做法^[1]。它和服务端渲染的差别只在生成时间，一个在构建时生成好，一个在每次请求时现做。选它之前要看两件事，页面内容多久变一次，以及页面数量会不会把构建时间拖长。

生成时机与产物

预渲染把拼装动作提前到构建阶段。Next.js 的文档写明，静态生成在构建时产出 HTML，并在每次请求时复用^[1]。

产物是一批静态 HTML 文件。文件可以直接放进对象存储或 CDN，请求到来时不需要执行页面代码^[1]。

Vue 的文档把这种做法称为静态站点生成，并说明它又叫预渲染，前提是页面数据对每个用户都一样^[2]。数据不随人变化，才有一份文件服务所有人的可能。

增量更新是后来补上的一层。Nuxt 用路由规则给某条路径安排预渲染、缓存或按需再生成^[3]。内容更新时不必整站重建。

对抓取与首屏的作用

爬虫拿到的是一份已经写满内容的 HTML。正文、标题和内链都在响应里，不需要执行脚本^[2]。

首屏最快的一档就在这里。响应里没有需要现场计算的内容，服务器只负责把文件发出去^[1]。

Google 说明建议采用服务器端渲染或预渲染，原因是用户和抓取工具能更快看到内容，而且并非所有漫游器都能运行 JavaScript^[5]。

百度把收录的前半段概括为抓取网页、建立索引数据库，再把库里的数据展现给用户^[6]。静态文件每次都返回同样的内容，抓取这一步最稳定。

成本与维护代价

运行成本低是它最大的好处。静态文件不需要常驻进程，也不必为每次请求准备处理器和内存^[1]。

构建时间是主要代价。页面越多，构建越久；一次全量构建可能从几分钟涨到几十分钟，内容频繁更新时尤其明显。

个性化内容拿不到。同一份文件发给所有人，页面里不能放按用户变化的内容，除非把这些部分改到浏览器里生成。

数据更新有延迟。文件在构建时定稿，新内容要等下一次构建才生效。

适合的站点类型

内容稳定的站点最合适。博客、文档站、产品介绍页这类内容，发布后很少改动^[3]。

页面数量可控的站点也合适。几百到几千个页面，构建时间还能接受；上百万个页面就要重新考虑方案。

反过来，价格实时变动、库存随时增减的页面不适合预渲染，除非把变化的部分留给浏览器。

与动态渲染的分界

两者名字接近，用途不同。预渲染对用户和爬虫返回同一份 HTML；动态渲染对爬虫返回服务器渲染的版本，对用户返回浏览器渲染的版本^[4]。

Google 对动态渲染的定位很明确。它把动态渲染写成临时解决方法，并建议改用服务器端渲染、静态渲染或水合^[4]。

常见误用

• 把预渲染当成万能方案，页面内容天天变还用静态文件。
• 页面数量很大却每次全量构建，发布窗口被拉长。
• 把只给爬虫看的预渲染版本当成长期方案，用户和爬虫看到的版本越走越远。
• 忽略缓存刷新，页面改了但 CDN 上还是旧文件。

附录

参见

• 服务端渲染（SSR）
• 同构渲染
• 边缘渲染

参考资料

官方（境外）

1. 《Rendering》，Next.js，2026-03-03 更新。
2. 《Server-Side Rendering (SSR)》，Vue.js。
3. 《Rendering Modes》，Nuxt。
4. 《将动态呈现作为临时解决方法》，Google 搜索中心，2025-12-18 更新。
5. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。

官方（国内）

6. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

外部链接

无。