Next.js

Next.js 是一套框架，它建立在 React 之上，在框架这一层就规定了内容在哪里渲染，默认把页面放在服务端生成^[1]。做 SEO 的人会关注它，它是 React 生态里的主流方案，专门解决客户端渲染的抓取问题。它把服务端渲染、静态生成和增量更新做成了配置项，多数内容站不必自己搭这套链路。

框架定位与生态

Next.js 由 Vercel 维护，是 React 生态里使用面最广的框架之一。路由、数据拉取、渲染和构建打包在一起，开发者不用自己拼接。

它提供两种路由方式，较新的是 App Router。在 App Router 里，布局和页面默认是服务端组件，可以取数据并在服务端渲染，需要交互的部分再用客户端组件补上^[1]。

生态上，它和 React 的组件库通用，常见搭配有 Tailwind CSS、Prisma 和 Vercel 的托管平台。电商站、内容站和营销页用它较多。

渲染方式

Next.js 把渲染拆成服务端和客户端两部分。

服务端组件在服务端渲染，结果打包成一种紧凑的数据格式，叫 React 服务端组件负载。客户端组件的代码和这份负载一起，用来预渲染出 HTML^[1]。用户在首屏看到 HTML，随后脚本接管，页面变得可交互。

需要在浏览器里运行的部分，用 "use client" 标出来。这个指令是一条分界线，标了它的文件，以及它直接引用的组件，都会打进客户端的代码包^[1]。

静态生成与增量更新

对内容不常变的页面，Next.js 可以预渲染。页面在构建阶段生成静态 HTML，请求进来时直接返回文件。

内容会更新时，用增量静态再生成。页面首次访问时生成，之后按设定的时间在后台重新生成，用户拿到的仍是缓存好的 HTML。这样既保留了静态页面的速度，又不必每次改内容都重新部署。

抓取与收录

Google 处理 JavaScript 网页分三个阶段：抓取、呈现、编入索引^[3]。服务端渲染的页面，第一阶段拿到的 HTML 就带着正文，不必等第二步。

元数据的处理也交给了框架。页面可以声明一个元数据对象，也可以写一个函数去取数据再生成。Next.js 会依此生成对应的 head 标签^[2]。

有一处细节要注意：动态页面的元数据默认是流式写入的。有的爬虫要求元数据出现在 head 里，Next.js 会把它们识别出来，改成先写好再输出^[2]：

export const metadata = {
  title: '页面标题',
  description: '页面描述',
  alternates: { canonical: 'https://www.example.com/page' },
}

使用的代价

• 要跑一个服务端进程。服务端渲染和增量更新都要有运行环境，比纯静态托管贵。
• 构建更慢。页面多、又要预渲染时，构建时间随页面数增长。
• 概念更多。服务端组件和客户端组件之间有边界，放错位置会报错，也会让代码包变大。
• 出错时页面空白。脚本加载失败或渲染报错，客户端组件不会显示。

常见误用

一个误用是把整个页面都标成客户端组件。这样等于退回客户端渲染，服务端渲染的好处就没了。官方建议只把需要交互的部分标出来^[1]。

另一个误用是预渲染时用了只在浏览器可用的接口。构建阶段没有 window 和 document，代码会直接报错。

还有一种是改了网址不配重定向。旧的静态页面已经生成过，地址一变就成了 404。

附录

参见

• React
• 静态站点生成器
• JavaScript SEO

参考资料

官方（境外）

1. 《Server and Client Components》，Next.js 官方文档。
2. 《Metadata and OG images》，Next.js 官方文档，2026-08-25 更新。
3. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-04 更新。

外部链接

无。