2024年，”明度科技”的产品经理王磊遇到了一个让他头疼的问题。
他们的技术博客使用了Next.js（一个React框架）构建，大量内容通过JavaScript渲染。在传统搜索引擎（Google、百度）中，经过配置后内容可以被正常抓取。但在AI搜索测试中，他们发现了一个严重的问题：
当他们在ChatGPT（联网搜索）和Perplexity中搜索自己博客上的内容时，AI搜索有时能看到内容，有时看不到——而且没有明显的规律。
更奇怪的是，同样使用JavaScript渲染的竞品网站，在AI搜索中却被正常引用。
团队花费了两周时间排查，最终发现问题的根源：他们的Next.js页面虽然配置了SSR（服务端渲染），但在某些边缘情况下（如缓存过期、API响应延迟），页面会fallback到CSR（客户端渲染）模式。AI搜索在抓取时遇到了”空白页面”，自然就无法提取内容。
这个案例揭示了一个关键问题：JavaScript渲染的内容在AI搜索中可能面临与传统搜索引擎不同的抓取挑战。
JavaScript渲染内容在AI搜索中的表现，是一个比传统搜索更复杂的问题。
AI搜索抓取JavaScript内容的特殊挑战：
抓取工具的不同：不同AI搜索产品使用不同的抓取工具。ChatGPT使用Bing的抓取引擎，Perplexity使用自建搜索引擎，文心一言使用百度的抓取引擎。这些工具对JavaScript的支持程度不同。
超时机制的不同：AI搜索在抓取时通常有更严格的超时限制。如果页面需要在客户端执行大量JavaScript才能展示内容，可能在AI搜索的抓取超时之前无法完成渲染。
缓存机制的差异：传统搜索引擎有成熟的缓存机制（如Google的Web Rendering Service），可以缓存渲染后的页面。AI搜索的缓存机制尚不成熟，每次抓取可能都需要重新渲染。
对”预渲染”内容的依赖：AI搜索更倾向于抓取”立即可见”的内容——即不需要JavaScript执行就能看到的HTML内容。这与传统SEO的”预渲染”优化方向一致，但要求更加严格。
JS渲染内容在AI搜索中的抓取成功率：
| 渲染方式 | AI搜索抓取成功率 | 常见AI搜索 | 推荐度 |
|---|---|---|---|
| SSR（服务端渲染） | 95%+ | ChatGPT/Perplexity/文心一言 | ⭐⭐⭐⭐⭐ |
| SSG（静态生成） | 98%+ | 所有AI搜索 | ⭐⭐⭐⭐⭐ |
| ISR（增量静态生成） | 90%+ | 主流AI搜索 | ⭐⭐⭐⭐ |
| 预渲染（Prerender） | 85%+ | 部分AI搜索 | ⭐⭐⭐ |
| CSR（客户端渲染） | 40-60% | 有限支持 | ⭐⭐ |
| SPA（单页应用） | 30-50% | 极有限 | ⭐ |
数据支撑：
对于AI搜索友好的网站架构，SSR和SSG是最安全的选择：
技术框架的GEO推荐：
| 框架 | 推荐模式 | 说明 |
|---|---|---|
| Next.js | SSG/ISR > SSR > CSR | 优先使用静态生成 |
| Nuxt.js | SSG/SSR > CSR | 使用universal模式 |
| Gatsby | SSG（默认） | 天然GEO友好 |
| Astro | SSG（默认） | 极佳的GEO表现 |
| Create React App | 需要预渲染改造 | 不推荐直接使用 |
| Vue SPA | 需要SSR改造 | 不推荐直接使用 |
如果完全迁移到SSR/SSG成本过高，可以采用渐进式增强方案：
方案A：动态预渲染
– 使用Prerender.io或Rendertron等服务
– 对AI搜索的抓取请求（通过User-Agent识别）返回预渲染的HTML
– 对普通用户返回CSR版本
// Next.js中的动态预渲染配置
export async function getServerSideProps(context) {
// 检测是否为AI搜索的抓取请求
const userAgent = context.req.headers['user-agent'];
const isAISearchBot = /GPTBot|PerplexityBot|Claude-Web/i.test(userAgent);
if (isAISearchBot) {
// 返回预渲染内容
return { props: { ...data } };
}
// 返回CSR所需数据
return { props: { clientData: true, ...data } };
}
方案B：关键内容内联
– 将核心内容（标题、摘要、关键数据）直接放在初始HTML中
– 即使JavaScript未执行，AI搜索也能获取核心信息
– 非关键内容（评论区、相关文章等）可延迟加载
方案C：静态备份页面
– 为每个动态页面生成静态HTML备份
– 通过robots.txt或sitemap指向静态版本
– AI搜索抓取时优先抓取静态版本
确保AI搜索能”看到”你的关键内容：
□ 文章标题是否在初始HTML中？（不依赖JS渲染）
□ 核心段落（前200字）是否在初始HTML中？
□ 关键数据点是否在初始HTML中？
□ Schema标记是否在初始HTML中？
□ 内部链接是否在初始HTML中？
□ 图片的alt文本是否在初始HTML中？
□ 文章的发布时间是否在初始HTML中？
在服务器端配置对AI搜索抓取工具的支持：
# Nginx配置示例：为AI搜索抓取工具提供预渲染内容
location / {
if ($http_user_agent ~* "GPTBot|PerplexityBot|Claude-Web|Google-Extended|CCBot") {
proxy_pass http://prerender-service:3000;
break;
}
# 普通用户的正常处理
try_files $uri $uri/ /index.html;
}
需要支持的AI搜索User-Agent：
| AI搜索产品 | User-Agent | 说明 |
|---|---|---|
| ChatGPT | GPTBot | OpenAI的网页抓取工具 |
| Perplexity | PerplexityBot | Perplexity的抓取工具 |
| Claude | Claude-Web | Anthropic的抓取工具 |
| Google AI | Google-Extended | Google AI相关的抓取 |
| 文心一言 | Baidu Spider | 百度的抓取工具 |
第一步：JS渲染审计（1-2天）
第二步：关键内容提取（1-2天）
第三步：预渲染配置（1周）
根据技术架构选择合适的预渲染方案：
第四步：持续监控（每月）
某CSR网站在迁移到SSR后的数据：
| 指标 | 迁移前（CSR） | 迁移后（SSR） | 变化 |
|---|---|---|---|
| AI搜索抓取成功率 | 47% | 96% | +104% |
| AI搜索引用率 | 5.8% | 31.2% | +438% |
| AI搜索流量 | 34次/月 | 567次/月 | +1568% |
| 页面初始内容完整度 | 23% | 98% | +326% |
| 传统搜索引擎抓取完整性 | 78% | 99% | +27% |
（数据来源：该网站2024年内部数据）
坑1：认为”传统搜索能抓取=AI搜索也能抓取”
传统搜索引擎（如Google）对JavaScript的渲染能力远强于AI搜索的抓取工具。你的页面在Google中表现很好，不代表在ChatGPT中也能正确抓取。针对AI搜索的抓取工具进行单独测试非常必要。
坑2：使用客户端渲染（CSR）架构做内容网站
如果你的网站严重依赖CSR（如React SPA），而内容对SEO/GEO很重要，建议尽快迁移到SSR或SSG。CSR架构在AI搜索时代的劣势将越来越明显。
坑3：对所有AI搜索抓取工具一视同仁
不同的AI搜索产品使用不同的抓取工具，对JavaScript的支持程度不同。需要分别为每个AI搜索产品优化抓取体验。
坑4：过度优化导致性能下降
为了AI搜索的抓取而牺牲用户体验（如加载速度、交互流畅性）。在”对AI搜索友好”和”对用户友好”之间找到平衡。
JavaScript渲染的内容在AI搜索中的表现，取决于你的技术架构选择和配置。以CSR为主的SPA架构在AI搜索时代面临显著的抓取挑战，而SSR/SSG架构则能提供最佳的AI搜索兼容性。
JavaScript内容在AI搜索中的优化核心：
1. 确保核心内容在初始HTML中可见（不依赖JS执行）
2. 优先选择SSR/SSG渲染模式
3. 为AI搜索抓取工具提供特殊的抓取支持
4. 持续监控AI搜索的抓取效果
立即行动：
1. 今天测试你的页面在禁用JS后的内容完整性
2. 识别AI搜索无法抓取的关键内容
3. 制定技术迁移或预渲染方案
4. 在AI搜索中验证优化效果
在AI搜索时代，”看得见”是”被引用”的前提。确保你的内容在AI搜索的抓取工具面前是可见的，你才不会在GEO竞争中输在起跑线上。