深入解析 React Server Components 的渲染机制

什么是 React Server Components

React Server Components（RSC）是 React 引入的一种新渲染模型，其核心是在服务器端执行组件逻辑。与传统客户端组件不同，RSC 的代码不会被捆绑到客户端 bundle 中，而是在服务端渲染成特定的序列化格式，随后由客户端进行 hydrate（水合）。

核心收益

RSC 最显著的优势之一是减小了 bundle 体积。由于组件的依赖项不会被发送到浏览器，因此像 Markdown 解析或日期格式化这类重量级依赖都可以留在服务器上运行。

async function Article({ id }) {
  const post = await db.post.findUnique({ where: { id } });
  return <h1>{post.title}</h1>;
}

另一个关键点是，Server Components 天然支持异步操作。这意味着你可以直接在组件中使用 await 获取数据，无需再依赖 useEffect 配合 useState 的组合方式。

什么时候应该使用 Client Components

对于需要交互的场景，例如处理 onClick 事件或使用 useState、useEffect 等 Hooks 的组件，仍需使用 Client Components，并通过 'use client' 指令显式声明组件边界。

总体而言，RSC 并非要完全取代 Client Components，而是与之协同工作：将数据密集型、无需交互的逻辑置于服务器端，而交互密集型的部分保留在客户端。