动态渲染
动态渲染是一种网站为每个页面提供两个版本的技术：向搜索引擎爬虫提供预渲染的静态 HTML 快照，向人类用户提供完整的 JavaScript 单页应用体验。Google 曾在 2018 年公开将其推荐为重度依赖 JS 的网站的一种权宜之计，随后在 2024 年随着 Googlebot 的 JS 渲染能力日趋成熟，又悄然将其降级为「过时的权宜之计」。
动态渲染是一种网站为每个页面提供两个版本的技术：向搜索引擎爬虫提供预渲染的静态 HTML 快照，向人类用户提供完整的 JavaScript 单页应用体验。Google 曾在 2018 年公开将其推荐为重度依赖 JS 的网站的一种权宜之计，随后在 2024 年随着 Googlebot 的 JS 渲染能力日趋成熟，又悄然将其降级为「过时的权宜之计」。
为什么重要
重度依赖 JavaScript 的网站过去会发送空的 HTML 外壳，指望爬虫运行 JS 来看到真实内容。Googlebot 最终做到了这一点，但速度很慢，往往在首次获取 HTML 之后数天才完成，而其他爬虫（Bing、AI 机器人、Facebook 链接预览）表现更差。动态渲染让 SEO 团队无需重写应用，就能保证爬虫立即看到完整渲染的 HTML。对于电商商品目录、JS 仪表盘以及有关键 SEO 需求的 SPA 而言，它是一座务实的桥梁。理解它仍然重要，因为如今许多网站仍在运行动态渲染，需要进行迁移。
工作原理
1. 请求到达：边缘节点或服务器检查 user-agent。
2. 爬虫检测：如果 user-agent 与已知的搜索机器人（Googlebot、Bingbot、Twitterbot、LinkedInBot、AI 爬虫）匹配，请求就会被路由到预渲染服务。否则，它会命中正常的 SPA。
3. 预渲染服务：一个无头 Chrome（通常借助 prerender.io、Rendertron、Puppeteer 或 Playwright）获取页面，等待 JS 执行完毕，捕获 DOM，返回静态 HTML。
4. 缓存：渲染后的 HTML 会被缓存，使后续的爬虫访问无需重新渲染。
5. 机器人看到 HTML，用户看到 SPA：同一个 URL，两种体验。
为何它如今成了「过时的权宜之计」
Google 2024 年的指引将动态渲染从「推荐」改为「一种权宜之计，而非长期解决方案」。原因如下：
Googlebot 如今能很好地渲染 JS：Google 运行着最新版的无头 Chrome，并能在大多数页面上快速处理 JS。对 Google 而言，采用动态渲染的最初理由大多已不复存在。
维护负担：并行运行第二条渲染管线带来的运维复杂度，通常超过其收益。
分歧风险：当预渲染服务出故障或内容陈旧时，机器人看到的是旧内容，用户看到的是新内容，这是典型的伪装信号。
虽非伪装处罚，但相去不远：Google 明确表示动态渲染并非伪装，但机器人视图与用户视图之间的分歧可能触发人工审查。
现代 SSR / SSG 更好：Next.js、Nuxt、SvelteKit、Astro 和 Remix 默认就会发送服务器渲染或静态生成的页面，无需动态渲染。
何时（如果有的话）它仍然有意义
无法重写的遗留 SPA：一个成熟、重度依赖 JS 的应用，没有预算进行 SSR 迁移。动态渲染作为过渡方案仍然可行。
非 Google 爬虫：AI 爬虫、Bing、百度和小众机器人渲染 JS 的能力仍然不如 Google。如果这些对你的流量很重要，动态渲染会有帮助。
小工具和嵌入内容：在初始 HTML 之后才通过 JS 加载的内容，有时动态渲染是把它暴露给爬虫的唯一办法。
边缘渲染权宜方案：在 CDN 边缘进行轻量动态渲染，即时将 SPA 转换为 HTML，无需独立的预渲染服务。
如何迁移以摆脱动态渲染
1. 审查 JS 中究竟有哪些环节出问题：使用 Search Console 的网址检查和渲染对比。许多「JS SEO 问题」只是关键页面缺少 SSR 而已。
2. 将关键页面迁移到 SSR 或 SSG：先迁移首页、落地页、产品页、文章页。把仪表盘和登录后区域保留为 SPA。
3. 使用现代框架：Next.js / Nuxt / SvelteKit 开箱即可处理混合渲染。
4. 验证一致性：迁移后，用 Screaming Frog 抓取新网站，确认 HTML 与旧预渲染所产出的内容一致。
5. 停用预渲染服务：仅在 Search Console 覆盖率报告连续数周保持干净之后才停用。
常见错误
故意提供不同的内容：动态渲染是「相同内容，不同形式」。提供不同的内容属于伪装，会受到处罚。
不更新预渲染缓存：陈旧的预渲染会向机器人提供旧内容，导致网站以昨天的产品参与排名。
事事依赖预渲染：在没有 SSR 策略的网站前面架设预渲染，意味着你随时可能因一次宕机而对爬虫「失明」。
忽视非 Googlebot 的 UA 列表：Bing、Yandex、百度、AI 爬虫的 UA 各不相同。漏掉任何一个，都会让你对那个机器人形成伪装。
为新项目使用动态渲染：不要这么做。请改用现代框架中的 SSR/SSG。
Sources: