React Server Components 完全指南

React Server Components (RSC) 是 React 18 引入的一个重要特性，它允许我们在服务器端渲染组件，从而提升应用性能。

什么是 Server Components？

Server Components 是在服务器上渲染的 React 组件，它们可以直接访问数据库、文件系统等后端资源。

主要优势

1. 零客户端 JS 体积 - Server Components 不会发送到客户端
2. 直接访问后端 - 无需 API 层
3. 自动代码分割 - 客户端组件按需加载
4. 更小的包体积 - 减少下载的 JS 代码量

使用方式

// Server Component (默认)
async function BlogPost({ id }) {
  const post = await db.post.findUnique({ where: { id } });
  return <div>{post.content}</div>;
}

// Client Component
'use client';
import { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(l => l + 1)}>{likes}</button>;
}

最佳实践

1. 尽可能使用 Server Components
2. 只在需要交互时使用 Client Components
3. 保持 Server Components 简单和纯粹
4. 合理组织代码结构