什么是 React Server Components？
React Server Components（RSC）是 React 的一种新范式，允许组件在服务器端渲染并直接发送到客户端，而不需要将 JavaScript 打包到客户端 bundle 中。
核心概念
Server Components
默认情况下，Next.js App Router 中的所有组件都是 Server Components：
- 在服务器端运行和渲染
- 可以直接访问数据库、文件系统
- 不会增加客户端 JavaScript 体积
- 不支持
useState、useEffect等客户端 Hooks
Client Components
当组件需要交互性时，添加 "use client" 指令：
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
性能优势
通过将渲染逻辑移到服务器端，RSC 可以：
1. 减少客户端 JavaScript — 只发送必要的交互代码 2. 加快首次加载 — 服务器直接返回 HTML 3. 改善 SEO — 完整的 HTML 内容对搜索引擎友好
实际应用
在 Next.js 中使用 RSC 构建博客系统时，文章列表和文章内容都是 Server Components，只有导航菜单的移动端切换需要 Client Component。
总结
React Server Components 代表了 React 的未来方向。理解和掌握 RSC 是构建高性能现代 Web 应用的关键。