# Next.js、Vue 等前端渲染站点：让 AI 爬虫读到正文

> Googlebot 会渲染 JavaScript，但 2024 年的一项研究发现主要 AI 爬虫不会。用 SSR、静态生成或预渲染，把正文、链接和元数据放进服务端 HTML，再用不执行 JS 的抓取和服务器日志验证。

- URL: https://geo.casa/zh-cn/best-practices/javascript-sites/
- 指南 · 官方文档已说明
- 审核于: 2026-10-28

本文写给用 React、Next.js、Vue、Nuxt 等框架建站的开发者和技术负责人。它解释 AI 爬虫为什么可能拿到空白页、哪些渲染选择能解决、怎样检查结果。检查几个模板只要一小时；现有应用切换渲染模式，可能需要几天到几周。

## 一句话路线

1. 假定 AI 爬虫只读服务器返回的 HTML。
2. 查清每个模板的 HTML 里到底有什么。
3. 在服务端渲染正文：SSR、静态生成或预渲染。
4. 链接、元数据和结构化数据也放进这份 HTML。
5. 机器人收到的内容与用户看到的保持一致。
6. 用不执行 JS 的抓取和爬虫日志验证，每次发版后复查。

## 1. 假定爬虫只读服务端 HTML

Google 会渲染 JavaScript。按现有最好的证据，大多数 AI 爬虫不会。

> **官方文档已说明:**
> Google 分三个阶段处理 JavaScript 页面：抓取、渲染、索引。页面在队列中等待，「一旦 Google 的资源允许，无头 Chromium 就会渲染页面并执行 JavaScript」。
>
> 参考来源: [Google Search Central: Understand JavaScript SEO basics](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)

> **实践观察:**
> Vercel 与 MERJ 在 2024 年 12 月发布的测试中发现，他们考察的主要 AI 爬虫都不渲染 JavaScript，涉及 OpenAI、Anthropic、Meta、字节跳动和 Perplexity 的爬虫。使用 Googlebot 基础设施的 Gemini 会渲染 JavaScript，AppleBot 也会。
>
> 参考来源: [Vercel & MERJ: The rise of the AI crawler (17 Dec 2024)](https://vercel.com/blog/the-rise-of-the-ai-crawler)

> **官方文档已说明:**
> Google 仍然推荐服务端渲染或预渲染，因为「这能让网站对用户和爬虫都更快，而且并非所有机器人都能运行 JavaScript」。
>
> 参考来源: [Google Search Central: Understand JavaScript SEO basics](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)

这项研究只是一次观测，距今快两年，各家 AI 公司也都没有公开说明自己是否渲染。稳妥的设计不依赖谁会渲染：把内容放进 HTML。背景见 [JavaScript 渲染与 AI 爬虫](https://geo.casa/zh-cn/implementation/javascript-rendering-ai-crawlers/)。

> 按不执行 JavaScript 的爬虫来设计。会执行的爬虫就成了加分项，而不是依赖。

*依据 Vercel 与 MERJ 2024 年 12 月的测试；各 AI 公司没有公开说明其爬虫是否渲染 JavaScript。*

## 2. 查清每个模板返回什么

不必检查全站。每类模板挑一个网址：首页、文章、商品、分类、文档页。

```sh
curl -s -A "OAI-SearchBot" https://example.com/page/ > raw.html
grep -c "正文中间的一句话" raw.html
grep -iE '<title>|rel="canonical"|name="description"|application/ld\+json' raw.html
```

逐个模板记录原始 HTML 中是否有：

| 项目 | 原始 HTML 中有吗？ |
|---|---|
| 正文和标题 | |
| 以 `<a href>` 形式存在的内链 | |
| 标题、描述、规范网址 | |
| 结构化数据 | |
| 选项卡、折叠面板、「加载更多」里的内容 | |

再用网址检查工具对照 Google 看到的版本：[网址检查工具](https://geo.casa/zh-cn/measurement/url-inspection/)。两者的差距，就是 AI 爬虫漏掉的部分。

## 3. 在服务端渲染正文

现代框架本来就支持服务端渲染，很多时候只要别主动关掉它。

> **官方文档已说明:**
> 在 Next.js App Router 中，布局和页面默认是 Server Components。在服务端，Client Components 和 Server Component 载荷会用来预渲染 HTML，浏览器在 JavaScript 完成水合之前就先显示这份 HTML。
>
> 参考来源: [Next.js (Vercel): Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components)

> **官方文档已说明:**
> Vue 的 SSR 指南把更好的 SEO 列为优点，因为爬虫能直接看到完整渲染的页面。指南提醒：如果应用先显示加载动画再用 Ajax 取内容，「the crawler will not wait for you to finish」（爬虫不会等你加载完）。如果只有少数页面需要 SEO、数据在构建时已知，它推荐静态生成（SSG）。
>
> 参考来源: [Vue.js: Server-Side Rendering (SSR)](https://vuejs.org/guide/scaling-up/ssr.html)

选择渲染模式：

| 内容 | 模式 |
|---|---|
| 营销页、文档、博客 | 构建时静态生成 |
| 经常变化的商品目录或内容 | SSR，或静态生成加定时重新验证 |
| 登录后的应用界面 | 客户端渲染即可，爬虫不需要 |

在 Next.js 中，留意在 `useEffect` 里取数据、以及在组件树高处写 `"use client"` 的情况。在 Vue 或 Nuxt 中，确认关键内容页不是纯客户端路由。

> **官方文档已说明:**
> Google 表示：「动态渲染是一种权宜之计，不是推荐的解决方案。」它推荐服务端渲染、静态渲染或水合。
>
> 参考来源: [Google Search Central: Dynamic Rendering as a workaround](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering)

所以只给机器人提供预渲染快照，只能作为旧应用的过渡办法，要计划替换掉。

## 4. 链接和元数据也放进 HTML

爬虫靠链接发现页面，靠元数据理解页面。两者若是后注入的，出了问题也不会报错。

- 导航用真正的 `<a href>` 链接，不要用 `div` 加点击事件：[链接最佳实践](https://geo.casa/zh-cn/content-structured-data/link-best-practices/)。
- 在服务端输出 `<title>`、meta 描述、规范网址和 `hreflang`：[规范网址（canonical）信号](https://geo.casa/zh-cn/crawling-indexing/canonical-signals/)、[为多语言页面设置 hreflang](https://geo.casa/zh-cn/crawling-indexing/hreflang/)。
- JSON-LD 写在服务端 HTML 里，不要靠标签管理器注入：[结构化数据与 AI 搜索](https://geo.casa/zh-cn/content-structured-data/structured-data-ai-search/)。
- 返回真实的状态码。客户端显示「找不到页面」却返回 `200`，就是软 404：[HTTP 状态码与爬虫](https://geo.casa/zh-cn/implementation/http-status-crawlers/)。
- XML Sitemap 从同一套路由生成：[XML 站点地图（Sitemap）](https://geo.casa/zh-cn/crawling-indexing/xml-sitemaps/)。

## 5. 给机器人和用户同样的事实

> **官方文档已说明:**
> 微软的 Copilot 购物指南要求：渲染后的 DOM 要包含消费者看到的同样事实，绝不向机器人提供不同的 HTML。
>
> 参考来源: [Microsoft Advertising: From discovery to influence: A guide to GEO](https://about.ads.microsoft.com/content/dam/sites/msa-about/global/common/content-lib/pdf/from-discovery-to-influence-a-guide-to-geo.pdf)

服务端渲染对所有人返回同一份 HTML，这一条自然满足。事实走样往往出在只给机器人的快照和按 User-Agent 分流上：价格、库存、日期。如果必须保留快照服务，定期把它的输出和线上页面对比。

> 服务端渲染让每个读者，无论是人还是机器人，看到同一个页面。这正是它的意义。

## 6. 验证，并持续验证

> **官方文档已说明:**
> 要作为 AI 概览或 AI 模式中的辅助链接出现，页面「必须已被编入索引，并且符合在 Google 搜索中显示摘要的条件」。
>
> 参考来源: [Google Search Central: AI features and your website](https://developers.google.com/search/docs/appearance/ai-features)

- 用网址检查工具查看关键模板，确认已被索引。
- 把第 2 步的 `curl` 检查加进 CI，哪次发版把内容挪到了客户端，构建就失败。
- 框架升级和改版后，重新做一遍模板检查。

## 不要做的事

- **不要相信浏览器里的测试结果。** 你的浏览器会执行 JavaScript，爬虫可能不会（见第 1 步）。
- **新站不要用动态渲染。** Google 称之为权宜之计（见第 3 步）。
- **不要把关键内容藏在点击后才加载的交互里**（见第 2 步）。
- **不要用 llms.txt 或 Markdown 副本代替修复渲染。** 没有文档说明它们能替代：[说法核查：llms.txt 能提升 AI 搜索可见度](https://geo.casa/zh-cn/tools-protocols/llms-txt/)。
- **不要禁止 Googlebot 抓取渲染所需的 JS 和 CSS。** Google 渲染时要用到它们：[robots.txt](https://geo.casa/zh-cn/crawling-indexing/robots-txt/)。

## 怎么判断有没有效果

> **官方文档已说明:**
> Google 的爬虫可以通过反向 DNS 查询再正向查询来验证，也可以对照 Google 公布的 IP 列表验证。
>
> 参考来源: [Google: Verify requests from Google crawlers and fetchers](https://developers.google.com/crawling/docs/crawlers-fetchers/verify-google-requests)

- **原始 HTML。** 每个关键模板都在 CI 中通过第 2 步的检查表。
- **爬虫访问。** 已验证的 AI 搜索爬虫来抓取页面并拿到 `200`：[在服务器日志中验证 AI 爬虫流量](https://geo.casa/zh-cn/implementation/verify-ai-crawlers/)。
- **索引。** 在 Search Console 网页索引编制报告中确认已索引：[网页索引编制报告](https://geo.casa/zh-cn/measurement/page-indexing-report/)。
- **引用。** 用固定提示词集合和 AI 报告衡量，见 [用提示词抽样测量 AI 可见度](https://geo.casa/zh-cn/measurement/ai-visibility-measurement/) 和 [Bing AI 表现报告（AI Performance）](https://geo.casa/zh-cn/measurement/bing-ai-performance/)。

## 证据一览

| 建议 | 证据等级 |
|---|---|
| Googlebot 会排队渲染 JS | 官方（Google） |
| 主要 AI 爬虫不渲染 JS | 实践观察（Vercel 与 MERJ，2024-12） |
| 正文服务端渲染或预渲染 | 官方（Google、Vue、Next.js） |
| 新建项目避免动态渲染 | 官方（Google） |
| 机器人与用户看到同样的事实 | 官方（微软，限 Copilot 购物） |
| 用原始抓取和日志验证 | 官方（Google） |

## 参考来源

- [Google Search Central: Understand JavaScript SEO basics](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [Vercel & MERJ: The rise of the AI crawler (17 Dec 2024)](https://vercel.com/blog/the-rise-of-the-ai-crawler)
- [Google Search Central: AI features and your website](https://developers.google.com/search/docs/appearance/ai-features)
- [Next.js (Vercel): Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components)
- [Vue.js: Server-Side Rendering (SSR)](https://vuejs.org/guide/scaling-up/ssr.html)
- [Google Search Central: Dynamic Rendering as a workaround](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering)
- [Microsoft Advertising: From discovery to influence: A guide to GEO](https://about.ads.microsoft.com/content/dam/sites/msa-about/global/common/content-lib/pdf/from-discovery-to-influence-a-guide-to-geo.pdf)
- [Google: Verify requests from Google crawlers and fetchers](https://developers.google.com/crawling/docs/crawlers-fetchers/verify-google-requests)