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
  遵循"文件即路由"原则：

  // pages/about.js → 对应路由 /about
  export default function About() {
    return <div>关于我们</div>
  }

  目录结构直接映射URL路径

2. 数据获取机制

// 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>
}

// 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支持渐进式布局嵌套：

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <section>
      <DashboardNav />
      {children}
    </section>
  )
}

Pages Router需手动实现布局传递：

// 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对比

性能表现

1. 首屏加载速度

   • App Router：通过服务端组件实现HTML直接输出，首屏加载更快
   • Pages Router：需加载JS后渲染内容，存在白屏时间

2. 资源优化

3. 数据吞吐效率

   • App Router：组件级数据获取，无效数据不阻塞页面
   • Pages Router：整页数据就绪后才渲染内容

SEO优化能力

优化维度	App Router	Pages Router
默认渲染方式	SSR	CSR
元数据管理	内置API	需next/head
静态生成	支持	支持
动态内容索引	更优	需额外配置

SEO建议

内容密集型网站（如博客/电商）优选App Router，其默认SSR特性更利于搜索引擎爬取

使用场景决策指南

✅ 推荐使用App Router

1. 全新项目（优先获得最新功能）
2. 高内容时效性需求（新闻/实时数据）
3. 复杂布局系统（多级嵌套/动态布局）
4. 需要增量静态再生(ISR)功能
5. 多媒体网站（流式传输优化体验）

⚠️ 可考虑Pages Router

1. 现有项目迁移成本过高时
2. 纯静态站点（SSG）需求简单时
3. 需要短期快速原型验证
4. 团队熟悉传统React开发模式

升级迁移路径

迁移须知

1. 二者可在同一项目中并存（优先匹配App Router）
2. 公共组件需调整为"use client"标记
3. 数据获取方式需要重构
4. 建议通过官方向导工具(next migrate)操作

结论与最佳实践

决策要素	建议方案
新项目开始	首选App Router
复杂应用开发	强烈推荐App Router
简单静态站点	Pages Router足够
现有项目维护	逐步迁移
需要前沿功能	App Router独占

最终建议

2025年起启动的项目应优先使用App Router，它代表了Next.js的未来发展方向，虽然学习曲线较陡峭，但通过：

1. 逐步掌握服务端组件概念
2. 实践流式传输和服务器操作
3. 利用嵌套布局优化代码结构 您将获得更优性能体验和开发效率

官方数据显示App Router在TTFB(首字节时间)上平均比Pages Router快27%，在FCP(首次内容渲染)上性能提升63%