SSR 与 CSR 在 AI 可抓取性方面的比较 —— 我们切换后 AI 引用提升了 2 倍，附数据分析

我做过爬虫基础设施，来解释一下原因。

不同爬虫处理 JavaScript 的方式：

为何 AI 机器人通常跳过 JS：

1. 规模 —— 渲染数十亿页面成本高
2. 速度 —— JS 增加延迟
3. 可靠性 —— JS 可能出错、超时
4. 简单性 —— 直接 HTML 更易处理

实际影响：

如果您的内容需要 JavaScript 才能显示，AI 训练数据可能根本没有包含它。您的内容在他们的模型中等于“消失”。

SSR 完全解决这个问题。

HTTP 响应中的 HTML = 保证可访问。

静态站点生成（SSG）对 AI 可见性来说甚至更优。

SSG 的优势：

• 100% 内容为 HTML
• 不需要服务器端渲染
• 加载速度极快
• 完美缓存
• 最大化爬虫可访问性

我们的实践：

• Hugo 用于市场站点（5,000 页）
• 部署时预构建
• 全球 CDN 分发

AI 可抓取性：100%

每页纯 HTML，AI 机器人可访问全部内容。

权衡点：

SSG 适合内容不按请求变化的场景。动态内容（如用户仪表盘、个性化）则需 SSR 或混合方案。

我们的建议：

• 市场内容 → SSG
• 博客/文档 → SSG
• 电商 → SSR
• 应用 → 混合（关键内容 SSR，交互 CSR）

根据内容类型选对工具。

谈谈 SSR 对 AI 的性能角度：

Core Web Vitals 改善：

SSR 通常能提升：

• LCP（最大内容绘制）——内容更快可见
• FID/INP —— 更少 JS 阻塞主线程
• CLS —— 布局更稳定

这对 AI 的意义：

1. Google 以 CWV 作为排名因素
2. 更好的用户体验信号 = 更多权威
3. 页面更快 = 更好爬虫体验

我们的客户数据：

AI 可见性的相关性：

CWV 更优的网站，AI 引用率普遍更高。原因可能包括：

• 内容质量信号一致
• 爬虫抓取体验好
• 整体权威度更高

SSR 是双赢：性能提升 + AI 可访问性提升。

从企业角度谈渲染架构：

复杂性所在：

大型站点需求多样：

• 市场页面（内容为主）
• 产品目录（动态数据）
• 用户账号（个性化）
• 文档（参考资料）

我们的混合方案：

页面类型           → 渲染策略
市场（Marketing）   → SSG（构建时）
博客/文档           → ISR（增量静态）
产品页              → SSR（动态数据）
用户仪表盘           → CSR（需登录）

Next.js 实现举例：

// 市场页 - getStaticProps (SSG)
// 产品页 - getServerSideProps (SSR)
// 仪表盘 - 仅客户端渲染

各版块 AI 可见性：

核心结论：

渲染策略要与内容用途匹配。不是所有都需 SSR，但关键内容必须 SSR。

如何为 AI 审核你的渲染方式：

快速测试：

1. 在浏览器禁用 JavaScript
2. 打开页面
3. 内容是否可见？

如果不可见 → AI 机器人也可能看不到。

技术审核：

curl -A "custom-bot" https://yoursite.com/page | grep "your content"

如果响应中找不到内容 → 有问题。

工具推荐：

• Chrome DevTools → 禁用 JS
• Google Search Console → URL 检查
• Screaming Frog → JavaScript 渲染模式
• Am I Cited → AI 可见性相关性

常见现象：

CSR 站点经常出现：

• Google 排名好（能渲染 JS）
• Bing 排名差（JS 支持有限）
• AI 引用差（机器人不渲染 JS）

如果 Google 排名和 AI 可见性不一致，很可能就是渲染问题。

AI 友好渲染的框架推荐：

SSR 最佳框架：

静态站点生成器：

迁移建议：

React SPA → Next.js（最易迁移） Vue SPA → Nuxt（最易迁移） 从零开发 → Astro（最灵活） 内容型 → Hugo 或 11ty（构建最快）

常见错误：

不要把预渲染当“事后补救”。一开始就要为 SSR 设计内容架构。

总结一下大家的讨论：

渲染决策框架：

要让 AI 可见，必须保证内容在不启用 JavaScript 时也能以 HTML 访问。

AI 可访问性排序：

1. SSG（静态站点生成） —— 最佳。构建时 100% HTML。
2. SSR（服务器端渲染） —— 极佳。每次请求生成 HTML。
3. ISR（增量静态生成） —— 很好。混合方案。
4. 动态渲染 —— 不错。机器人 SSR，用户 CSR。
5. CSR 预渲染 —— 一般。需额外配置。
6. 纯 CSR —— 最差。多数 AI 机器人无法访问内容。

迁移优先级：

1. 内容页（博客、文档、市场）—— 优先最高
2. 产品/服务页 —— 次高
3. 分类/列表页 —— 中等
4. 用户专属页 —— 不适用（AI 无需访问）

技术检查清单：

• 禁用 JS 后内容可见
• curl 响应包含内容
• 爬虫工具能抓取全部内容
• Am I Cited 显示 AI 可见性
• 无水合不一致

我们 2 倍提升的唯一关键： 让内容直接出现在 HTML 响应，而不是依赖 JavaScript。

如果你的内容优秀但 AI 没有引用，请检查你的渲染方式。

感谢大家的技术分享！