服务端渲染（SSR）

服务端渲染（Server-Side Rendering，SSR）是在服务器上生成完整的 HTML 页面，再把它发给浏览器的做法^[1]。做 SEO 的人要在几条渲染路线里选一条，这条和其他的差别最大：HTML 由谁生成、在什么时候生成、爬虫能不能直接读到内容，三件事都跟着变。选它之前要想清楚两点，服务器要能执行页面代码，而且它的好处并不覆盖所有页面。

生成位置与请求流程

服务端渲染把页面代码放到服务器上运行。请求到达后，服务器先取数据，再按模板拼出完整的 HTML，最后把这段 HTML 作为响应返回^[2]。浏览器收到的就是成品，正文、标题和内链都在里面。

MDN 给的定义只有一句：“服务器端渲染（SSR）指的是在服务器上生成 HTML 内容并将其发送到客户端”^[1]。页面代码只在服务器上执行一次，浏览器不参与首次拼装。

生成的时间点决定页面能带什么数据。Next.js 把两种预渲染分开说，静态生成在构建时产出 HTML，服务端渲染在每次请求时产出 HTML^[2]。请求到达时才生成，页面就能放进当次请求的数据，例如购物车里的商品。

拼装动作在服务器上完成，爬虫和用户拿到的是同一份 HTML。Vue 的文档把它描述为，服务器把组件渲染成 HTML 字符串，直接发给浏览器^[3]。

对抓取与首屏的作用

爬虫最先拿到的是响应里的 HTML。服务端渲染把内容直接写进这份 HTML，爬虫不必执行 JavaScript 就能读到正文和链接^[1]。

首屏跟着受益。浏览器拿到 HTML 就能开始绘制，不必等脚本下载完再生成内容，首次内容绘制因此提前^[1]。

好处有一个前提，脚本仍然会被送到浏览器。页面要在浏览器里变得可交互，还得下载并执行同一套代码，这一步叫水合。水合就是把事件监听器绑到已经渲染好的 HTML 上，水合没完成之前，页面看着已经出来，点击却可能没有反应。

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

百度把收录的前半段概括为抓取网页、建立索引数据库，再把库里的数据展现给用户^[5]。正文写在首次响应里，这三个环节的输入才有内容可用。

成本与维护代价

服务器要能执行页面代码，这是最直接的成本。Vue 的文档说得很直白，服务端渲染的应用不能在纯静态环境里跑，它需要一台能运行 Node.js 的服务器^[3]。

每次请求都要跑一遍页面代码，处理器占用随流量上升。面对高流量时，需要相应增加服务器容量，并配合缓存策略^[3]。

缓存可以省掉一部分重复计算。同一个页面被多个访客请求时，把生成好的 HTML 缓存起来，就能跳过重复的拼装。

搭建与部署也更麻烦。静态文件放在任何静态服务器上都能跑，服务端渲染的应用不行，它要求环境里始终有一个进程在运行^[3]。

适合的站点类型

内容型的站点是主要适用对象。内容更新频繁、又希望爬虫尽快拿到正文时，服务端渲染正好合适。

数据因人而异的页面也适合。登录后的控制台、按用户显示的推荐位，这类内容没法提前生成，只能在请求到来时现做。

反过来，内容很少变化、访客又不多时，预渲染更划算。Next.js 的建议是，出于性能考虑，多数页面用静态生成，只有少数页面用服务端渲染^[2]。

常见误用

• 以为上了服务端渲染，收录就一定变好。内容能不能被收录，还要看页面本身有没有实质内容。
• 只做服务端渲染，不管水合失败。脚本报错时页面停在半成品状态，交互全部失效。
• 把所有页面都改成服务端渲染。访问量小的栏目也要常驻一台服务器，成本与收益对不上。
• 忽略缓存。每个请求都重新取数据、重新拼装，服务器压力成倍上升。

附录

参见

• 客户端渲染（CSR）
• 预渲染
• 同构渲染

参考资料

官方（境外）

1. 《服务器端渲染（SSR）》，MDN Web 文档，2025-10-10 更新。
2. 《Rendering》，Next.js，2026-03-03 更新。
3. 《Server-Side Rendering (SSR)》，Vue.js。
4. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。

官方（国内）

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

外部链接

无。