React

React 是一套构建用户界面的 JavaScript 库，它把界面拆成组件，让开发者用函数描述页面长什么样^[1]。做 SEO 的人会碰上它，因为很多网站用 React 开发，而它本身只管浏览器里的界面，默认不生成服务端 HTML。要不要用它，以及配哪套框架来补渲染，直接决定抓取工具能读到多少内容。

框架定位与生态

React 官方把自己描述成一套界面库，用来构建用户界面，组件是它的基本单位^[1]。一个组件就是一段返回标记的 JavaScript 函数，返回的标记语法叫 JSX^[1]。

React 由 Meta 发起并维护，社区生态很大。写页面常见的配套有：路由用 React Router，状态管理用 Redux 或 Zustand，做服务端渲染用 Next.js 或 Remix。

这里有一条分界要记住：React 是库，不是完整框架。它只负责把界面渲染出来，路由、数据拉取和构建这些事，要由别的工具组合起来。

默认渲染方式

React 项目默认在浏览器里渲染。服务器返回的 HTML 里只有一个挂载点，通常长这样：<div id="root"></div>。

浏览器下载 JavaScript 之后，React 把组件渲染成 DOM，再填进这个挂载点。整个过程和 Vue 一样，属于客户端渲染。

要把内容放到服务端生成，用的接口来自 react-dom/server。官方说明：“这些 API 只在应用顶层的服务端使用，用来生成初始的 HTML”，大多数组件不用直接调用它们^[2]。常见的有把组件树渲染成字符串的 renderToString，以及把它渲染成流的 renderToPipeableStream^[2]。

这些接口通常不用自己写。用 Next.js 这类框架时，框架会替你调用它们^[2]。

客户端渲染对抓取的影响

对客户端渲染的页面，抓取工具第一次请求拿到的 HTML 里没有正文。

Google 处理 JavaScript 网页分三个阶段：抓取、呈现、编入索引^[4]。页面先进入渲染队列，等资源允许时用无头浏览器执行脚本，之后才能读到内容。官方对排队时间没有承诺，只说可能几秒，也可能更长^[4]。

不执行脚本的抓取工具，包括一部分搜索引擎和 AI 爬虫，拿到的始终是那个只有挂载点的 HTML。

服务端渲染的补法

要拿到带正文的 HTML，就得让服务端先把组件渲染出来。

React 生态里，主流做法是用 Next.js。它默认把布局和页面当作服务端组件，在服务端渲染，需要交互的部分再标成客户端组件^[3]。这样首屏 HTML 里就带着正文。

内容不常变时还可以预渲染。页面在构建阶段生成静态 HTML，服务器直接发文件，抓取工具一次请求就能拿到完整内容。

使用的代价

• 构建链复杂。React 项目要经过打包才出成品，工具链里通常还叠着路由和状态管理，配置项不少。
• 首屏依赖脚本。客户端渲染的页面，内容要等 JavaScript 下载执行之后才出现。
• 出错时页面空白。脚本报错或被拦，挂载点就是空的。
• 服务端渲染要维护进程。用 Next.js 做服务端渲染，要有一个能跑 Node.js 的运行环境，并按流量配缓存。

常见误用

一个误用是把 React 当成完整框架，以为装上它就有了路由和渲染方案。它只是界面库，其余部分要自己配。

另一个误用是只给用户看内容，HTML 里什么都没有。抓取工具看到的是挂载点，看不到正文。

还有一种是把规范网址和标题交给脚本在浏览器里生成。Google 建议规范网址优先写在 HTML 里，脚本改动容易出岔子^[4]。

附录

参见

• Next.js
• Vue
• JavaScript SEO

参考资料

官方（境外）

1. 《Quick Start》，React 官方文档。
2. 《Server React DOM APIs》，React 官方文档。
3. 《Server and Client Components》，Next.js 官方文档。
4. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-04 更新。

外部链接

无。