React Server Components 深入理解

什么是 Server Components

React Server Components（RSC）是 React 的一种新组件类型，它只在服务端渲染，不会向客户端发送任何 JavaScript 代码。

与 SSR 的区别

很多人会把 Server Components 和 SSR 混淆，其实它们有本质区别：

特性	SSR	Server Components
首次渲染	服务端渲染 HTML	服务端渲染 HTML
客户端 JS	需要 hydrate	不需要 hydrate
水合成本	有	无
交互性	需要 JS	有限

优点

1. 零 Bundle Size

Server Components 不会被打包到客户端 bundle 中，直接减小 bundle 体积：

// Server Component
import { readFile } from 'fs';

async function BlogPost() {
  const content = await readFile('./post.md', 'utf-8');
  return <article>{content}</article>;
}

2. 直接访问后端资源

Server Components 可以直接访问数据库、文件系统等：

import { db } from './db';

async function UserList() {
  const users = await db.users.findAll();
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. 自动代码分割

Client Components 和 Server Components 的边界自动成为代码分割点。

使用模式

混合使用

// Server Component
import { UserList } from './UserList';
import { UserSearch } from './UserSearch'; // Client Component

export default function Page() {
  return (
    <div>
      <UserSearch />  {/* Client Component */}
      <UserList />    {/* Server Component */}
    </div>
  );
}

最佳实践

1. 默认使用 Server Components — 除非需要客户端交互
2. 最小化 Client Components — 将交互逻辑集中在小组件中
3. 数据获取在 Server — 减少客户端数据请求

总结

Server Components 代表了 React 架构的一个重要演进方向。理解并善用它可以显著提升应用性能。Next.js 的 App Router 已经全面支持 RSC，现在就是学习和实践的好时机。