标准答案
- React SPA 通常只有一个 HTML 入口，路由由客户端 React Router 接管，页面内容主要在浏览器运行后生成。
- Next.js 提供约定式路由、服务端渲染、静态生成、API 路由或服务端能力，适合内容、SEO、首屏和全栈场景。
- 渲染模式上，SPA 主要是 CSR；Next.js 可以按页面或组件选择 SSR、SSG、ISR、CSR，以及 App Router 下的 Server Components。
- SEO 上，Next.js 更容易在首屏 HTML 中输出标题、描述、结构化内容和可索引主体；SPA 需要额外预渲染或 SSR 支持。
- 选择时要看业务目标：后台系统未必需要 Next.js，内容站、营销页、文档、需要搜索流量的页面更适合考虑 Next.js。
题目解析
这道题不应该回答成 Next.js 一定优于 SPA。两者解决的问题不同。
SPA 的优势是模型简单、部署直接、适合强登录后的应用；Next.js 的优势是渲染模式丰富、SEO 和首屏能力更强。
Next.js 增加了服务端和客户端边界，团队要理解数据获取、缓存、hydration、运行时和部署平台差异。
代码示例
下面的 Next.js 页面可以在服务端生成元信息，而 SPA 通常需要客户端运行后再补充内容。
TSX
export async function generateMetadata({ params }: PageProps) {
const article = await getArticle(params.slug)
return {
title: article.title,
description: article.excerpt
}
}
export default async function ArticlePage({ params }: PageProps) {
const article = await getArticle(params.slug)
return <article>{article.title}</article>
}常见误区
- 认为 Next.js 只是 React Router 的文件路由版本。
- 所有 React 项目都默认上 Next.js，不评估 SEO、首屏、部署和团队成本。
- 在 Next.js 里混淆服务端组件和客户端组件边界，随意使用 window 或浏览器 API。