深入理解 Next.js 14 App Router
App Router 是 Next.js 13 引入的新一代路由系统,本文带你深入理解它的设计理念与实战应用。
深入理解 Next.js 14 App Router
Next.js 14 的 App Router 是基于 React Server Components 构建的全新路由架构,它从根本上改变了我们构建 React 应用的方式。
一、为什么需要 App Router
在 App Router 出现之前,Pages Router 面临一些挑战:
- 数据获取与渲染耦合: 组件既要处理 UI,又要处理数据
- 客户端开销大: 所有组件默认在客户端渲染
- 状态管理复杂: 服务端状态需要额外的状态管理库
App Router 通过引入服务端组件 (RSC) 解决了这些问题。
二、核心概念
1. 服务端组件 (Server Components)
// app/posts/page.tsx
// 默认是服务端组件
export default async function PostsPage() {
const posts = await fetch('https://api.example.com/posts')
.then((res) => res.json());
return (
<ul>
{posts.map((post: any) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
服务端组件的优势:
- ⚡ 更小的客户端 bundle
- 🔒 数据安全性更高
- 🚀 SEO 友好
- 💾 直接访问后端资源
2. 客户端组件 (Client Components)
需要在文件顶部添加 'use client' 指令:
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
点击了 {count} 次
</button>
);
}
3. 布局系统
App Router 支持嵌套布局,通过 layout.tsx 实现:
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="zh-CN">
<body>{children}</body>
</html>
);
}
三、数据获取模式
App Router 推荐使用 Server Actions 或 Route Handlers。
Server Actions
async function createPost(formData: FormData) {
'use server';
const title = formData.get('title');
// ...保存到数据库
}
Route Handlers
// app/api/posts/route.ts
export async function GET() {
const posts = await db.posts.findMany();
return Response.json(posts);
}
四、性能优化
静态生成
export async function generateStaticParams() {
const posts = await getAllPosts();
return posts.map((post) => ({ slug: post.slug }));
}
流式渲染
使用 loading.tsx 实现 Suspense 边界:
// app/posts/loading.tsx
export default function Loading() {
return <div>加载中...</div>;
}
五、最佳实践
- 默认使用服务端组件,只在需要交互时使用客户端组件
- 数据获取靠近数据源,减少客户端请求
- 善用缓存,Next.js 14 默认会缓存 fetch 请求
- 使用 Server Actions 处理表单,避免手写 API
结语
App Router 代表了 React 生态的未来方向。掌握它不仅能让你的应用更快、更安全,也能让你对 React 的本质有更深的理解。
学习新架构的最好方式,就是用它构建一个真实的项目。
希望这篇文章对你有帮助。如果有疑问,欢迎在评论区交流。✨
回到首页感谢阅读 · 欢迎在下方留言