# 深入理解 Next.js App Router 路由机制
Next.js 13 引入的 App Router 是对 React 服务端组件（RSC）的全面拥抱，它改变了我们构建 Next.js 应用的方式。本文将深入探讨 App Router 的核心概念、文件约定以及它如何优化应用性能。
## 核心概念
### Server Components vs Client Components
在 App Router 中，默认情况下所有组件都是 **Server Components**。这意味着它们在服务器上渲染，生成的 HTML 发送到客户端。这大大减少了发送到客户端的 JavaScript 包大小。
如果你需要使用 React 的 Hooks（如 `useState`, `useEffect`）或浏览器事件监听器，你需要在文件顶部添加 `"use client"` 指令，将其标记为 **Client Component**。
### 路由段（Route Segments）
App Router 使用文件系统作为路由。文件夹定义路由段。
- `app/page.tsx`: 根路由 `/`
- `app/dashboard/page.tsx`: `/dashboard`
- `app/blog/[slug]/page.tsx`: 动态路由 `/blog/:slug`
## 特殊文件约定
Next.js 提供了一系列特殊文件来处理 UI 的不同状态：
- `layout.tsx`: 共享 UI，跨路由保持状态。
- `template.tsx`: 类似于 layout，但在导航时会重新挂载。
- `loading.tsx`: React Suspense 的 fallback UI，处理加载状态。
- `error.tsx`: 错误边界，处理运行时错误。
- `not-found.tsx`: 处理 404 错误。
## 性能优化
App Router 带来了自动的代码分割和预取（Prefetching）。
当使用 `<Link>` 组件时，Next.js 会自动预取视口内的路由。对于静态路由，它会预取整个路由数据；对于动态路由，它会预取布局段。
## 总结
App Router 是 Next.js 的未来。虽然思维模式的转变需要时间适应，但它带来的性能提升和开发体验改进是值得的。