React Server Components 实战：构建高性能 Next.js 应用

React 18 引入的服务端组件（Server Components）革命性地改变了传统 React 应用的渲染模式。结合 Next.js App Router，开发者可以构建高性能、SEO 友好的现代 Web 应用。本文通过实战案例深入讲解这一架构。

一、传统 React 应用的三大痛点

1. 捆绑包地狱（Bundle Hell）

传统的 React SPA 将所有组件代码打包发送到客户端，即使很多组件在首次渲染时并不需要。一个典型的电商详情页可能包含 750KB 的 JavaScript，其中大量代码在首屏根本不显示。

2. 数据获取瀑布流（Waterfall）

页面加载 → 获取用户信息 → 获取购物车 → 获取推荐商品 → 获取评论，每一步都依赖上一步完成，总计可能需要 3-4 秒。

3. useEffect 滥用

数据获取、状态同步、副作用管理等逻辑散落在无数 useEffect 中，依赖数组管理困难，无限循环 bug 频发。

二、Server Components 架构设计

Server Components 的核心原则：尽量让父组件（页面）是服务端组件负责取数据，把数据作为 props 传给客户端组件负责交互。

服务端组件示例

// app/questions/page.tsx —— 服务端组件
export default async function QuestionsPage() {
  const questions = await getQuestions();  // 直接访问数据库
  return (
    <div>
      <h1>问题列表</h1>
      <div className="grid">
        {questions.map(q => (
          <QuestionCard key={q.id} question={q} />
        ))}
      </div>
    </div>
  );
}

客户端组件示例

// components/SearchBox.tsx —— 客户端组件
'use client';
import { useState, useMemo } from 'react';

export default function SearchBox({ allQuestions }) {
  const [searchTerm, setSearchTerm] = useState('');
  const filtered = useMemo(() =>
    allQuestions.filter(q => q.title.includes(searchTerm)),
    [allQuestions, searchTerm]
  );
  return (
    <div>
      <input value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
      {filtered.map(q => <div key={q.id}>{q.title}</div>)}
    </div>
  );
}

三、并行数据获取模式

使用 Promise.all 避免串行等待：

export default async function Page({ params }: Props) {
  const { id } = await params;
  const [question, answers, related] = await Promise.all([
    getQuestion(id),
    getAnswers(id),
    getRelatedQuestions(id),
  ]);
  // 三组数据并行获取，总耗时接近最慢的那一个
}

四、ISR 增量静态再生配置

export const revalidate = 3600;  // 每小时重新验证

export async function generateStaticParams() {
  const questions = await getQuestions();
  return questions.map(q => ({ id: q.id.toString() }));
}

五、性能收益

某电商项目的实测数据：

首屏加载时间：5.2秒 → 1.8秒（减少 65%）
JavaScript 包体积：3.2MB → 800KB（减少 75%）
Lighthouse 分数：52 → 98

React Server Components 不是简单的性能优化技巧，而是对前端架构的根本性重构。