深入理解 React Server Components

为什么需要 Server Components

传统的 React 应用把所有组件都打包发送到浏览器执行，随着应用变大，首屏 JS 体积成为性能瓶颈。

React Server Components（RSC）允许一部分组件只在服务端运行，它们：

• 不会把自身代码打包进客户端 bundle；
• 可以直接访问数据库、文件系统等后端资源；
• 渲染结果以特殊格式流式传输到客户端。

一个简单示例

// 这是一个 Server Component，可以直接 await 数据
export default async function Page() {
  const posts = await db.post.findMany();
  return <PostList posts={posts} />;
}

何时使用客户端组件

需要交互（事件、状态、浏览器 API）时，用 "use client" 声明：

"use client";
import { useState } from "react";

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

经验法则：默认写 Server Component，只在需要交互时才切到 Client Component。

小结

RSC 不是银弹，但它为「数据获取」与「交互」提供了清晰的边界，能显著减小 bundle 体积。