React Server Components 深度解析

为什么 Server Components 如此重要

在 React 的发展历程中，Server Components 可能是最具颠覆性的特性之一。它不仅仅是一个性能优化手段，更是对「组件」这一概念的重新思考。

传统的 React 应用，无论是 CSR 还是 SSR，最终都需要将 JavaScript 代码下发到客户端执行。而 Server Components 则完全在服务端渲染，永远不会出现在客户端的 JavaScript bundle 中。

工作原理

当用户请求一个页面时，服务端会执行 Server Components，生成一种特殊的序列化格式（RSC Payload），然后发送给客户端。客户端的 React 运行时接收这些数据，并将其渲染成 DOM。

// Server Component（默认）
async function BlogPost({ slug }: { slug: string }) {
  // 可以直接调用数据库，不会暴露给客户端
  const post = await db.posts.findBySlug(slug)
  return <article>{post.content}</article>
}

何时使用 Client Components

Server Components 并非万能。以下情况必须使用 Client Components：

• 需要使用 useState、useEffect 等 Hooks
• 需要绑定浏览器事件（onClick、onChange 等）
• 需要访问浏览器 API（localStorage、geolocation 等）

最佳实践：将客户端组件下推

一个常见的模式是将需要交互的部分抽离为独立的 Client Component，而将数据获取逻辑保留在 Server Component 中。这样可以最大化服务端渲染的好处，同时保留必要的交互能力。

这种「服务端数据 + 客户端交互」的分层架构，让我们能够在性能与体验之间找到最佳平衡点。