Next.js 14 App Router 完全指南：服务端组件、流式渲染与中间件实战

一、前言：Next.js 14 是现代全栈 React 开发的标配

Next.js 14 的 App Router 是自 React 16 以来最重要的架构升级。RSC（React Server Components）、Streaming SSR、Middleware 三大特性，让前后端边界彻底重构，开发体验和用户体验双双提升。

二、App Router 架构解析

2.1 服务端组件 vs 客户端组件

tsx 复制代码

// app/dashboard/page.tsx
// 默认是服务端组件（Server Component）
// 可以直接 await 数据库查询，无需 API Routes
async function DashboardPage() {
  const user = await db.user.findUnique({
    where: { id: params.userId }
  });

  return (
    <div>
      <h1>欢迎回来，{user.name}</h1>
      <OrderList orders={orders} />
    </div>
  );
}

2.2 客户端组件（需要交互时）

tsx 复制代码

// components/LikeButton.tsx
'use client';  // 必须声明

import { useState } from 'react';

export function LikeButton({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(c => c + 1)}>👍 {count}</button>;
}

2.3 服务端组件调用客户端组件

tsx 复制代码

// 服务端获取数据，客户端组件负责交互
async function PostPage({ params }) {
  const post = await getPost(params.id);
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <LikeButton initialCount={post.likes} />
    </article>
  );
}

三、Streaming 流式渲染

3.1 Suspense + 骨架屏

tsx 复制代码

async function DashboardPage() {
  return (
    <div>
      <UserStats />
      <Suspense fallback={<OrdersSkeleton />}>
        <RecentOrders />
      </Suspense>
      <Suspense fallback={<ChartSkeleton />}>
        <AnalyticsChart />
      </Suspense>
    </div>
  );
}

function OrdersSkeleton() {
  return (
    <div className="animate-pulse space-y-2">
      {[1,2,3].map(i => (
        <div key={i} className="h-12 bg-gray-200 rounded" />
      ))}
    </div>
  );
}

四、Middleware 中间件

4.1 认证守卫

tsx 复制代码

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth_token');

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  const response = NextResponse.next();
  response.headers.set('X-Custom-Header', 'Hello from Middleware');
  return response;
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*']
};

4.2 A/B 测试中间件

tsx 复制代码

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  if (!request.cookies.has('ab_variant')) {
    const variant = Math.random() > 0.5 ? 'A' : 'B';
    response.cookies.set('ab_variant', variant, { maxAge: 60 * 60 * 24 * 30 });
  }

  return response;
}

五、数据请求与缓存

5.1 三种缓存策略

tsx 复制代码

// 静态数据（CDN缓存）
fetch('url', { cache: 'force-cache' });

// 动态数据（每次请求重新获取）
fetch('url', { cache: 'no-store' });

// ISR（每小时自动重新生成）
fetch('url', { next: { revalidate: 3600 } });

5.2 并行与顺序请求

tsx 复制代码

// 并行（推荐）
const [user, stats, orders] = await Promise.all([
  getUser(), getStats(), getOrders()
]);

// 顺序（有依赖关系）
const user = await getUser();
const posts = await getUserPosts(user.id);

💬 Next.js 14 App Router 是现代全栈 React 开发的标配。收藏本文，项目重构不再迷茫！

标签：nextjs | react | 前端 | ssr