客户端渲染（CSR）

客户端渲染（Client-Side Rendering，CSR）是把页面内容留到浏览器里生成的做法：首次响应只给出少量 HTML，正文要等浏览器下载并执行脚本之后才出现^[1]。它和另外几条渲染路线的分界在生成位置：服务端渲染、预渲染把内容写进首次响应，客户端渲染把内容留到浏览器里生成。选它之前要知道两件事，爬虫也要执行脚本才能读到内容，首屏速度取决于脚本体积与设备性能。

外壳页面与生成过程

纯客户端渲染的页面，首次响应里几乎没有正文。MDN 给出的例子很简单，一份 HTML 里只有一个根容器和一段脚本^[1]。页面内容由这段脚本在浏览器里生成。

脚本下载完并执行后，界面才出现。浏览器先下载脚本包，再执行框架代码，最后把元素写进 DOM^[2]。脚本执行完，用户才看到正文。

首屏因此分成两段等待。第一段是脚本下载，取决于网络和包体积；第二段是脚本执行，取决于设备和代码量^[2]。

Next.js 对客户端渲染的描述是，在浏览器里用 JavaScript 生成页面内容^[3]。这份 HTML 里只有让页面跑起来的脚本。

对抓取与首屏的影响

爬虫第一次拿到的就是外壳，正文不在里面。Google 会把页面放进渲染队列，等有空闲资源时再执行脚本^[4]。正文因此比首次抓取晚一步才进入索引。

Google 的文档写明了队列的代价：网页在队列里可能停留几秒，也可能更久^[4]。等待期间，页面上还没有可读的正文。

队列之后还有一道关卡。脚本被 robots.txt 挡住、脚本报错、或者内容要等用户点击才出现，渲染都拿不到那部分内容^[4]。这些情况下，页面在索引里可能是空的。

首屏对用户同样慢。脚本没执行完，屏幕上只有加载动画，滚动和点击也没有响应^[2]。

爬虫侧的结果可以核对。百度提供抓取诊断，用来查看 Baiduspider 取到了哪些内容，确认脚本生成的信息有没有被拿到^[6]。

成本与维护代价

客户端渲染的部署最简单。产物是一堆静态文件，放在静态服务器或 CDN 上就能跑，不需要常驻的渲染进程^[2]。

服务器压力也小。后续的数据更新走接口，不重新生成整页^[1]。

代价都在浏览器一侧。脚本包随功能增加而变大，旧设备和小带宽的网络首屏更慢。

还有一个容易被忽略的成本。爬虫的渲染要占用额外资源，Google 说明并不是所有网页都能顺利完成渲染^[4]。

适合的站点类型

登录后的界面最合适。控制台、后台里的数据不对外索引，首屏慢一点可以接受，交互流畅更重要^[2]。

交互密集的工具站也常选它。图表、编辑器、实时列表这类页面，内容随时在变，服务端渲染的收益有限。

需要抓取的内容页不适合。文章、商品、分类页这些需要搜索带来流量，正文应该写在首次响应里。

Google 为这类站点留了一条过渡做法。动态渲染会识别爬虫，给爬虫返回服务器渲染的版本，给用户返回客户端渲染的版本，但文档明确说它只是临时方案^[5]。

常见误用

• 全站做成纯客户端渲染，正文全部由脚本生成。
• 用 href="#" 加脚本跳转做导航，爬虫拿不到可跟踪的链接。
• 认为主流引擎都能执行脚本，就不做兜底。其他引擎和社交平台的爬虫大多不执行脚本。
• 脚本报错后没有兜底页面，用户和爬虫都停在空白页面上。

附录

参见

• 服务端渲染（SSR）
• 预渲染
• 同构渲染

参考资料

官方（境外）

1. 《客户端渲染（CSR）》，MDN Web 文档。
2. 《Rendering Modes》，Nuxt。
3. 《Client-side Rendering (CSR)》，Next.js。
4. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。
5. 《将动态呈现作为临时解决方法》，Google 搜索中心，2025-12-18 更新。

官方（国内）

6. 《平台工具使用手册（抓取诊断）》，百度搜索资源平台，2020-08-14 更新。

外部链接

无。