Next.js路由:App Router与Pages Router对比
引言
Next.js提供两种路由系统:App Router(应用路由) 和Pages Router(页面路由)。本文将通过核心差异分析、性能对比和使用场景实践,帮助你理解两种路由模型的本质区别及其适用场景。
核心差异总览
特性 | App Router | Pages Router |
---|---|---|
路由类型 | 服务端为中心 | 客户端为中心 |
默认组件类型 | 服务端组件 | 客户端组件 |
路由定义 | 使用嵌套文件夹定义路由结构 | 文件直接对应路由路径 |
布局系统 | 支持嵌套/动态布局 | 布局静态定义 |
数据获取方式 | fetch 函数 + React扩展 | getServerSideProps 等专用方法 |
动态路由 | 语法不同但支持 | 原生支持 |
优先级 | 高于Pages Router | App Router未匹配时作为回退 |
SEO优化 | 默认服务端渲染 | 需手动配置服务端渲染 |
版本兼容性提醒
Next.js v13.4+ 开始正式推荐使用App Router作为新项目的首选方案
详细功能对比
1. 路由定义方式
App Router
使用文件夹结构隐式创建路由,例如:/app/ ├── dashboard/ │ └── page.tsx → /dashboard └── settings/ └── page.tsx → /settings
支持嵌套和分组路由,文件组织更灵活
Pages Router
遵循"文件即路由"原则:jsx// pages/about.js → 对应路由 /about export default function About() { return <div>关于我们</div> }
目录结构直接映射URL路径
2. 数据获取机制
jsx
// App Router 示例
async function getData() {
const res = await fetch('https://api.example.com/data')
return res.json()
}
export default async function Page() {
const data = await getData()
return <main>{data.content}</main>
}
jsx
// Pages Router 示例
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data')
const data = await res.json()
return { props: { data } }
}
export default function Page({ data }) {
return <div>{data.content}</div>
}
注意数据获取差异
App Router直接在组件中使用标准fetch
,而Pages Router需要特定的数据获取函数(getServerSideProps、getStaticProps等)
3. 布局系统实现
App Router支持渐进式布局嵌套:
jsx
// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<section>
<DashboardNav />
{children}
</section>
)
}
Pages Router需手动实现布局传递:
jsx
// components/MainLayout.js
export default function MainLayout({ children }) {
return (
<div>
<Header />
<main>{children}</main>
<Footer />
</div>
)
}
// 每个页面都需要显式包裹
export default function HomePage() {
return (
<MainLayout>
<HomeContent />
</MainLayout>
)
}
4. 核心架构差异
架构维度 | App Router | Pages Router |
---|---|---|
渲染方式 | 默认服务端渲染 + 流式传输 | 客户端渲染(CSR)为主 |
组件模型 | 支持React Server Components(RSC) | 纯客户端组件 |
学习曲线 | 较高(需掌握RSC概念) | 较低 |
新功能支持 | 支持服务端动作/元数据API等新特性 | 无 |
性能与SEO对比
性能表现
首屏加载速度
- App Router:通过服务端组件实现HTML直接输出,首屏加载更快
- Pages Router:需加载JS后渲染内容,存在白屏时间
资源优化
数据吞吐效率
- App Router:组件级数据获取,无效数据不阻塞页面
- Pages Router:整页数据就绪后才渲染内容
SEO优化能力
优化维度 | App Router | Pages Router |
---|---|---|
默认渲染方式 | SSR | CSR |
元数据管理 | 内置API | 需next/head |
静态生成 | 支持 | 支持 |
动态内容索引 | 更优 | 需额外配置 |
SEO建议
内容密集型网站(如博客/电商)优选App Router,其默认SSR特性更利于搜索引擎爬取
使用场景决策指南
✅ 推荐使用App Router
- 全新项目(优先获得最新功能)
- 高内容时效性需求(新闻/实时数据)
- 复杂布局系统(多级嵌套/动态布局)
- 需要增量静态再生(ISR)功能
- 多媒体网站(流式传输优化体验)
⚠️ 可考虑Pages Router
- 现有项目迁移成本过高时
- 纯静态站点(SSG)需求简单时
- 需要短期快速原型验证
- 团队熟悉传统React开发模式
升级迁移路径
迁移须知
- 二者可在同一项目中并存(优先匹配App Router)
- 公共组件需调整为"use client"标记
- 数据获取方式需要重构
- 建议通过官方向导工具(
next migrate
)操作
结论与最佳实践
决策要素 | 建议方案 |
---|---|
新项目开始 | 首选App Router |
复杂应用开发 | 强烈推荐App Router |
简单静态站点 | Pages Router足够 |
现有项目维护 | 逐步迁移 |
需要前沿功能 | App Router独占 |
最终建议
2025年起启动的项目应优先使用App Router,它代表了Next.js的未来发展方向,虽然学习曲线较陡峭,但通过:
- 逐步掌握服务端组件概念
- 实践流式传输和服务器操作
- 利用嵌套布局优化代码结构 您将获得更优性能体验和开发效率
官方数据显示App Router在TTFB(首字节时间)上平均比Pages Router快27%,在FCP(首次内容渲染)上性能提升63%