约 1 分钟 393 字

React Server Components 深度解析

React前端SSR

2024 年底，React 19 正式版发布，React Server Components(RSC) 成为一等公民。这不是简单的 SSR 增强，而是一次彻底的架构革命。

什么是 Server Components

传统 React 组件全部在客户端运行。RSC 允许组件在服务端执行，只将渲染结果发送到客户端：

// ServerComponent.server.tsx —— 只在服务端运行
export default async function PostList() {
  const posts = await db.query('SELECT * FROM posts ORDER BY created_at DESC');

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

服务端组件的特点：

  • 零客户端 JS：组件代码不发送到浏览器
  • 直接访问后端资源：数据库、文件系统、API 密钥
  • 减少 bundle 体积：npm 包留在服务端

与 Client Components 的边界

用 'use client' 指令标记客户端组件：

'use client';

import { useState } from 'react';

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? '💜' : '🤍'}</button>;
}

组合模式：服务端组件可以渲染客户端组件，但反过来不行。一个典型的页面结构：

Page (Server Component)
├── Navigation (Server Component)
├── SearchInput (Client Component) ← 需要交互
├── BlogContent (Server Component) ← 纯内容
└── LikeButton (Client Component)  ← 需要状态

RSC 的性能收益

与传统方案对比：

方案JS Bundle数据获取SEO
CSR全量客户端差
SSR + Hydration全量服务端好
RSC按需服务端好

RSC 让你的页面只有需要交互的组件才加载 JS，纯展示内容零开销。

迁移建议

不要急于全部重写。从「叶子节点」开始——优先把数据展示组件转为 Server Component，交互组件保持 Client Component。逐步演进，风险可控。

React前端SSR