Next.js 14 App Router 深度解析
Next.js 14 的 App Router 带来了范式级别的变化，理解它才能真正发挥框架的威力。
Server Components 是默认选项
在 App Router 中，组件默认都是服务端组件，这意味着：
- 代码不会发送到客户端
- 可以直接读取数据库和文件系统
- 无需担心 bundle size 膨胀
tsx13 lines
// app/blog/[slug]/page.tsx - 自动在服务端渲染
import fs from 'node:fs';
import matter from 'gray-matter';
export default async function BlogPost({ params }: { params: { slug: string } }) {
const raw = fs.readFileSync(`./content/${params.slug}.mdx`, 'utf8');
const { data, content } = matter(raw);
return (
<article>
<h1>{data.title}</h1>
{/* ... 渲染内容 ... */}
</article>
);
}缓存策略速查表
| 方法 | 作用 |
|---|---|
fetch('...', { cache: 'force-cache' }) | 永久缓存（默认） |
fetch('...', { revalidate: 3600 }) | 每小时刷新 |
fetch('...', { cache: 'no-store' }) | 永不缓存 |
export const revalidate = 60 | 页面级别 ISR |
博客架构建议
对于个人博客，推荐使用 MDX + 文件系统 的方式，配合 next-mdx-remote 渲染。