- Published on
Next.js 入门到进阶：(七) App Router vs Pages Router
- Authors
- Name
- xiaobai
如果你在 Next.js 13 之前有过开发经验，你所熟悉的可能是 pages 目录。本系列教程全面拥抱了新的 App Router，但了解它与旧的 Pages Router 的区别，对于理解 Next.js 的演进和做出技术选型至关重要。
核心理念差异
Pages Router: 以页面为中心。每个文件都是一个独立的页面，拥有自己的数据获取方法 (
getServerSideProps,getStaticProps)。路由之间的共享布局需要通过自定义的_app.tsx和_document.tsx文件来实现，相对繁琐。App Router: 以组件和布局为中心。引入了 React Server Components (RSC) 的概念，默认所有组件都是在服务端渲染的。它天生支持嵌套布局和流式渲染 (Streaming)，让构建复杂的用户界面变得更加容易和高效。
主要特性对比
| 特性 | Pages Router (pages 目录) | App Router (app 目录) |
|---|---|---|
| 路由文件 | pages/about.tsx 创建 /about | app/about/page.tsx 创建 /about |
| 布局 | 通过 _app.tsx 和组件嵌套实现，比较受限 | 内置支持，通过 layout.tsx 文件实现嵌套布局 |
| 组件模型 | 只有客户端组件 | 服务端组件 (默认) + 客户端组件 ('use client') |
| 数据获取 | 页面级数据获取: getServerSideProps, getStaticProps | 组件级数据获取: 直接在 async 组件中使用 fetch |
| API 路由 | pages/api/hello.ts | app/api/hello/route.ts |
| 渲染 | SSG, SSR, CSR | SSG, SSR, CSR, ISR, 流式渲染 (Streaming) |
| 代码分割 | 基于页面自动分割 | 基于路由段 (segment) 自动分割 |
| 特殊文件 | _app.tsx, _document.tsx, _error.tsx | layout.tsx, page.tsx, loading.tsx, error.tsx, template.tsx, not-found.tsx |
App Router 的关键优势
1. 嵌套布局 (Nested Layouts)
在 App Router 中，你可以轻松地为一组页面创建共享的 UI。例如，app/dashboard/layout.tsx 会自动应用到所有以 /dashboard/ 开头的路由，如 /dashboard/settings 和 /dashboard/profile。更棒的是，在这些页面之间切换时，布局本身不会重新渲染，只有页面的内容会更新，这极大地提升了性能和用户体验。
2. 服务端组件 (Server Components)
这是 App Router 最具革命性的特性。
- 直接访问后端资源: 服务端组件可以直接访问数据库、文件系统或内部 API，无需额外创建 API 层。
- 减少客户端包体积: 大量的依赖库（如日期处理、Markdown 解析库）可以只保留在服务端，不会被打包进客户端的 JavaScript 文件中。
- 安全性: 敏感数据和逻辑（如 API 密钥）可以安全地保留在服务端，不会泄露到浏览器。
- 更好的性能: 组件在服务端渲染成 HTML，浏览器只需进行绘制，首屏加载速度更快。
3. 流式渲染 (Streaming) 与 Suspense
App Router 与 React Suspense 深度集成，支持流式渲染。这意味着你可以将页面的 UI 分成多个块，服务器会按块的渲染顺序，逐步将它们发送到浏览器。
用户可以先看到页面的整体布局和已经渲染好的部分（如骨架屏 loading.tsx），而无需等待整个页面的数据都加载完毕。这显著改善了感知性能，尤其对于数据依赖复杂的页面。
4. 简化的数据获取
如前一章所述，数据获取变得异常简单。不再需要区分 getServerSideProps 和 getStaticProps，只需在服务端组件中 async/await fetch 即可。通过 fetch 的缓存和 revalidate 选项，可以灵活地控制页面的渲染策略（SSG, SSR, ISR）。
何时选择 Pages Router？
尽管 App Router 是未来的方向，但在某些情况下，Pages Router 仍然是一个可行的选择：
- 现有项目: 对于已经使用 Pages Router 构建的大型成熟项目，立即迁移的成本可能很高。Next.js 允许在同一个项目中同时使用两种路由，可以进行渐进式迁移。
- 生态系统兼容性: 某些依赖于旧有 Next.js 行为的第三方库可能尚未完全适配 App Router。
总结
App Router 是 Next.js 团队对现代 Web 开发深思熟虑后的结果。它通过引入服务端组件、嵌套布局、流式渲染等先进概念，解决了 Pages Router 在构建大型复杂应用时遇到的一些痛点。
对于所有新项目，强烈推荐使用 App Router。它提供了更优的性能、更好的开发体验和更强的扩展性。
本系列教程到此已涵盖了 Next.js 开发的核心概念。在最后一篇中，我们将讨论如何将你的 Next.js 应用部署到生产环境。