React Server Components 深入浅出

RSC 改变了 React 的渲染模型

React Server Components（RSC）是 React 18/19 时代最重要的架构变革。它允许组件在 服务端 运行，只将交互式的"客户端组件"发送到浏览器。

为什么需要 RSC？

传统 React 应用（SPA）的问题：

包体积大：所有组件代码都打包发送到客户端
数据请求瀑布：组件层层嵌套导致请求串行
SEO 差：需要额外 SSR 配置

RSC 的解决方案：服务端组件只在服务端运行，代码不会发送到客户端。

基本用法

// app/page.tsx — 默认是服务端组件
import { db } from "@/lib/db";

export default async function HomePage() {
  // 直接查询数据库，不需要 API 层
  const posts = await db.post.findMany({
    orderBy: { createdAt: "desc" },
    take: 10,
  });

  return (
    <div>
      {posts.map(post => (
        // ✅ 渲染在服务端，HTML 直接发送
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content.slice(0, 200)}...</p>
        </article>
      ))}
    </div>
  );
}

客户端组件

需要交互的部分用 "use client" 标记：

"use client";

import { useState } from "react";

export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "❤️ 已喜欢" : "🤍 喜欢"}
    </button>
  );
}

混用模式

这是 RSC 最强大的能力——服务端组件可以直接引入客户端组件：

// ✅ 服务端组件（获取数据）
import { getPost } from "@/lib/data";
import { PostContent } from "./post-content";
import { LikeButton } from "./like-button";

export default async function PostPage({ id }: { id: string }) {
  const post = await getPost(id);

  return (
    <div>
      <PostContent content={post.content} />
      {/* 只有这个按钮被发送到客户端 */}
      <LikeButton postId={post.id} />
    </div>
  );
}

性能对比

指标	传统 SPA	RSC + 客户端组件
JS 体积	200-500 KB	50-100 KB
首屏加载	2-5 秒	0.5-1 秒
数据请求	客户端串行	服务端并行
SEO	需额外 SSR	天然支持

RSC 重新定义了 React 应用的分工：服务端负责数据和渲染，客户端只负责交互。这是 React 未来的方向。

naugnaug