基于 React、Vue 和 Angular 构建的单页应用（SPA）的兴起，带来了巨大的抓取挑战。如果搜索引擎无法执行你的...
基于 React、Vue 和 Angular 构建的单页应用（SPA）的兴起，带来了巨大的抓取挑战。如果搜索引擎无法高效执行你的 JavaScript，你的内容就等于不存在。下面介绍如何为最大化的 SEO 可见性来架构你的渲染流水线。
三种渲染范式
并非所有 JavaScript 架构都生而平等。你选择的方法决定了你的抓取预算与索引效率。
客户端渲染（CSR）
浏览器下载空的 HTML，JS 在设备上执行以渲染内容。对 SEO 极不友好。抓取失败率高。
服务端渲染（SSR）
服务器执行 JS，并向浏览器发送完全成型的 HTML。对 SEO 极佳。即时索引。
静态生成（SSG）
HTML 在编译时预构建。运行时零渲染成本。性能上的绝对最佳选择。
常见陷阱："第二波"索引延迟
当 Googlebot 遇到 CSR 页面时，它会执行一个两波索引流程：首先提取初始 HTML（对 CSR 页面而言通常是空的），然后将该 URL 排入 Web Rendering Service（WRS）队列以执行 JavaScript。Google 官方文档直白地描述了这一机制：
"Googlebot 会将所有返回 200 HTTP 状态码的页面排入渲染队列，除非 robots meta 标签或响应头告知 Google 不要索引该页面。"
— Google Search Central，理解 JavaScript SEO 基础
Google 曾表示这个队列通常清除得很快，但独立的抓取研究多次发现，大型或复杂站点在现实中的渲染延迟可能长达数天——对于一次大规模上线，稳妥的假设是天，而不是秒。
"如果你的电商价格或限时促销依赖客户端渲染，那么等 Googlebot 真正渲染并索引该页面时，促销早已结束了。"
不要凭空猜测你的站点实际在提供哪种范式。我们的AI 原始 HTML 查看器会展示抓取器在任何 JavaScript 执行之前收到的确切原始 HTML——这是确认你的"SSR"设置是否真正生效的最快方式。
解决方案：动态渲染 / 水合（Hydration）
如果你无法将整个应用迁移到 Next.js 或 Nuxt（SSR），就必须实现动态渲染。使用边缘 Worker（如 Cloudflare Workers）来检测 Googlebot 的 user-agent。如果是机器人，就返回预渲染的 HTML 快照；如果是真人用户，就返回常规的 CSR 应用。