AI 爬虫不会执行你的 JavaScript。看看它们实际看到了什么
如果你的页面在浏览器中渲染，ChatGPT、Claude 和 Perplexity 读到的可能只是一个空壳。如何判断，以及如何在 Next.js、React 等框架中修复。
大多数 AI 爬虫只读取服务器返回的 HTML，别的什么也不做。如果你的产品页在加载后才用 JavaScript 生成内容，GPTBot 或 ClaudeBot 这样的爬虫拿到的可能只有页头、页脚和一个加载动画。它读不到的产品，自然也推荐不了。
谁会渲染，谁不会
Googlebot 会执行 JavaScript。它会把页面排队渲染，再按浏览器显示的内容建立索引，所以客户端渲染的网站在 Google 上依然能有排名。Gemini 和 Google AI Overviews 基于 Google 的索引，因此也继承了这一点。
ChatGPT、Claude 和 Perplexity 背后的爬虫则不同。Vercel 和 MERJ 在 2024 年对爬虫流量做的一项分析发现，OpenAI 和 Anthropic 的爬虫会下载 JavaScript 文件，但并不执行。在厂商给出不同的说明之前，请默认这些爬虫只能看到你的原始 HTML。
这个差距解释了一个常见的困惑：一个网站在 Google 上排名不错，却从来没在 ChatGPT 关于自己品类的回答里出现过。
如何检查自己的页面
打开一个产品页，使用“查看网页源代码”，而不是元素检查器。检查器显示的是 JavaScript 运行之后的页面，源代码才是不渲染的爬虫拿到的内容。
在源代码里搜索一句你在页面上能看到的话，比如标题或价格。搜得到，爬虫就能读到。如果源代码里只有一个根 <div> 和几个 script 标签，说明你的内容是在浏览器中渲染的。
你也可以在终端里抓取页面：
curl -s https://yourdomain.com/pricing | grep -i "per month"没有匹配结果，就说明价格文字根本到不了跳过 JavaScript 的爬虫手里。
Promptvane 的免费 AI 就绪度体检会对你的首页和 sitemap 中抽样的页面做这项检查，并标出 HTML 中几乎没有文字的页面。
按框架修复
无论用什么框架，目标都一样：在第一次 HTML 响应里就把内容发出去。
在使用 App Router 的 Next.js 中，页面默认是 Server Components，会在服务端渲染。问题通常出在整个页面被标记为 'use client'，并在 useEffect 里获取数据。把数据获取移到 Server Component 中（静态页面可用 generateStaticParams），'use client' 只留给需要交互的部分。
在 Next.js 的 Pages Router 中，内容页应使用 getStaticProps 或 getServerSideProps，而不是在客户端获取数据。
对于用 Vite 构建的 React 或 Vue 单页应用，可以为公开页面加上预渲染，或者把营销页面迁移到 Next.js、Nuxt、Astro、Remix 这类在服务端渲染的框架。
WordPress、Webflow 和大多数托管建站工具本身就在服务端渲染。需要留意的是通过 JavaScript 组件加载内容的页面构建器和插件，比如评价轮播和价格表。
内容还会以其他方式“藏起来”
服务端渲染不是唯一的坑。放在标签页和折叠面板里的内容，只要在 HTML 中就没问题；只有点击标签页时才去获取的内容就不行。图片里的文字，对不做 OCR 的爬虫来说是看不见的。由第三方结账脚本注入的价格，往往根本不会出现在你的源代码里。
FAQ
Googlebot 会渲染 JavaScript，是不是就没问题了？
对 Google 搜索来说，基本没问题。对 ChatGPT、Claude 和 Perplexity 来说，不是。目前没有证据表明它们的爬虫会执行 JavaScript，所以只在渲染后才出现的内容，它们很可能看不到。
只把首页做成服务端渲染够吗？
不够。AI 助手通常会引用真正回答问题的那个页面：价格页、对比页、功能页。每个你希望被引用的页面，内容都需要在 HTML 里。
服务端渲染会影响性能吗？
通常恰恰相反。服务端渲染和静态页面能更快显示内容，这对 Core Web Vitals 也有帮助。