Next.js 14 App Router 深度解析

Next.js 14 的 App Router 是一个革命性的路由系统，它基于 React Server Components 构建，为现代 Web 应用带来了全新的开发体验。

核心概念

1. 服务端组件 vs 客户端组件

在 App Router 中，所有组件默认都是服务端组件：

// 这是一个服务端组件 — 默认行为
export default async function Page() {
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

当需要交互性时，使用 '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>
  );
}

2. 文件约定

App Router 使用特殊的文件命名约定：

文件	作用
page.tsx	页面组件
layout.tsx	布局组件
loading.tsx	加载状态
error.tsx	错误边界
not-found.tsx	404 页面
route.ts	API 路由

3. 流式渲染与 Suspense

Next.js 14 支持流式渲染，可以逐步发送 UI：

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <Suspense fallback={<div>加载中...</div>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

性能优化

静态渲染与动态渲染

• 静态渲染：在构建时预渲染，适合不经常变化的内容
• 动态渲染：在请求时渲染，适合个性化内容

部分预渲染 (PPR)

Next.js 14 引入了部分预渲染，允许在同一页面中混合静态和动态内容。

最佳实践

1. 尽量使用服务端组件，减少客户端 JavaScript
2. 合理使用 Suspense 边界，优化感知性能
3. 利用 Streaming，改善 TTFB 和 FCP
4. 使用 Route Groups 组织代码，不影响 URL 结构

---

技术永远在进化，保持学习和探索的热情，才能在这片星海中航行得更远。