React Server Components（简称RSC）是React团队推出的新特性，允许组件在服务端渲染，只把必要的交互部分发送到客户端。它能显著减少客户端JS体积、提升首屏性能、简化数据获取。本文从零开始介绍RSC的概念、原理、使用方法和注意事项，帮你快速入门。

一、为什么需要Server Components

在介绍RSC之前，先看看传统React应用面临的问题。

传统的React应用是客户端渲染（CSR），所有组件都在浏览器中执行，用户打开页面时需要下载整个JS bundle，然后执行JS渲染页面。这带来了几个问题：

第一，JS体积大。所有组件的代码、依赖的第三方库都要打包到客户端，即使某些组件不需要交互，代码也要下载和执行，影响首屏加载速度。

第二，数据获取复杂。客户端渲染需要先加载JS，然后发请求获取数据，再渲染页面，这就是所谓的"瀑布流"问题：JS加载→数据请求→渲染，每一步都要等上一步完成，首屏时间长。

第三，服务端渲染（SSR）虽然能解决首屏问题，但SSR是把整个应用渲染成HTML发送到客户端，然后还要hydrate（注水），客户端仍然需要下载所有JS来接管交互，而且SSR的组件不能直接访问服务端资源，数据获取还是要在客户端做。

RSC的目标就是解决这些问题：让组件在服务端执行，直接访问数据库和文件系统，只把渲染结果和必要的客户端组件发送到浏览器，大大减少客户端JS体积，同时简化数据获取。

二、RSC的核心概念

1. 服务端组件和客户端组件

RSC引入了两种组件：服务端组件（Server Component）和客户端组件（Client Component）。

服务端组件只在服务端执行，不会被打包到客户端JS中。它可以直接访问服务端资源（数据库、文件系统、微服务等），但不能使用浏览器API（window、document等），也不能有交互状态（useState、useEffect等）。

客户端组件和传统的React组件一样，在浏览器中执行，可以有状态和交互，使用浏览器API。需要在文件顶部加上"use client"指令来标记。

一个应用中，大部分组件可以是服务端组件，只有需要交互的部分（按钮、表单、状态管理等）才需要是客户端组件。这样客户端只需要下载少量的交互组件代码，JS体积大大减少。

2. 组合模式

RSC的强大之处在于服务端组件和客户端组件可以组合使用。你可以在服务端组件中引入客户端组件，也可以在客户端组件中引入服务端组件（通过children的方式）。

比如一个博客页面，文章内容是服务端组件，直接从数据库读取内容渲染；评论区是客户端组件，因为需要用户交互。服务端组件把文章内容渲染好，把评论区作为客户端组件发送到客户端，用户看到文章内容的同时，评论区的JS在后台加载，加载完后可以交互。

这种组合模式让你能根据需要灵活选择组件类型，兼顾性能和交互性。

3. 数据获取简化

在服务端组件中，你可以直接用async/await获取数据，不需要useEffect和状态管理。比如：

async function BlogPost({ id }) {
  const post = await db.posts.findUnique({ where: { id } });
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

这种方式比传统的客户端数据获取简单很多，而且数据在服务端就获取好了，渲染时直接用，没有瀑布流问题。服务端组件还能直接访问后端服务，不需要通过API层，减少了网络往返。

三、RSC的工作原理

1. 渲染流程

RSC的渲染流程大致是这样的：

  1. 用户请求页面，服务端开始渲染服务端组件树
  2. 服务端组件执行，获取数据，渲染成一种特殊的序列化格式（不是HTML，而是React元素的流格式）
  3. 遇到客户端组件时，把它的引用和props序列化，发送到客户端
  4. 客户端接收流，逐步渲染：服务端组件的渲染结果直接显示，客户端组件加载JS后hydrate
  5. 客户端组件可以交互，服务端组件可以通过重新请求来更新

这种流式渲染让用户能更快看到内容，不需要等整个页面渲染完。

2. 和SSR的区别

很多人会混淆RSC和SSR，它们是不同的东西，可以一起用。

SSR是把React组件渲染成HTML字符串，发送到浏览器，浏览器显示HTML，然后下载JS hydrate，让页面可交互。SSR的组件仍然是客户端组件，代码还是要打包到客户端。

RSC是组件的执行模型，服务端组件只在服务端执行，不打包到客户端。RSC的输出可以是HTML（配合SSR），也可以是序列化的组件树（配合客户端渲染）。

简单来说，SSR解决的是首屏HTML的问题，RSC解决的是客户端JS体积和数据获取的问题。两者可以结合使用，Next.js的App Router就是把RSC和SSR结合在一起的实现。

3. 缓存和重新渲染

服务端组件可以被缓存，因为它们没有状态，相同的输入总是产生相同的输出。React和框架（如Next.js）提供了缓存机制，可以缓存服务端组件的渲染结果，下次请求直接用缓存，提升性能。

当数据变化时，可以重新渲染服务端组件，或者通过路由导航重新请求。客户端组件的状态在服务端组件重新渲染时会被保留，因为它们是独立的。

四、如何使用RSC

目前RSC主要通过Next.js的App Router来使用，这是最成熟的实现。下面以Next.js为例介绍基本用法。

1. 创建服务端组件

在Next.js App Router中，组件默认是服务端组件，不需要任何标记。你可以直接写async组件获取数据：

// app/page.js - 默认是服务端组件
async function HomePage() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return (
    <div>
      <h1>博客文章</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

这个组件在服务端执行，fetch数据，渲染成HTML发送到客户端，客户端不需要下载这个组件的JS。

2. 创建客户端组件

需要交互的组件，加上"use client"指令：

// app/components/LikeButton.js
'use client';

import { useState } from 'react';

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

这个组件会被打包到客户端，下载JS后可以交互。

3. 在服务端组件中使用客户端组件

// app/page.js - 服务端组件
import LikeButton from './components/LikeButton';

async function HomePage() {
  const posts = await getPosts();
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
          <LikeButton /> {/* 客户端组件 */}
        </article>
      ))}
    </div>
  );
}

服务端组件获取数据渲染文章列表，每个文章下面的点赞按钮是客户端组件，只有点赞按钮的JS会发送到客户端。

4. 传递props

服务端组件可以给客户端组件传递props，但props必须是可序列化的（字符串、数字、对象、数组等），不能传递函数或不可序列化的对象。

// 服务端组件
<ClientComponent userId={user.id} theme="dark" />

客户端组件接收这些props，在浏览器中使用。

五、使用RSC的注意事项

1. 服务端组件不能用的东西

服务端组件中不能使用：

  • 浏览器API（window、document、navigator等）
  • React状态钩子（useState、useReducer）
  • 副作用钩子（useEffect、useLayoutEffect）
  • 事件处理函数（onClick、onChange等）
  • 浏览器专用的第三方库

如果需要这些，就用客户端组件。

2. 客户端组件的边界

一个文件标记了"use client"，它导入的所有组件都会变成客户端组件，即使那些组件本身没有标记。所以要把"use client"放在需要交互的最底层组件，而不是顶层组件，这样能最大化服务端组件的比例。

比如一个页面，只有搜索框需要交互，那就只把搜索框标记为客户端组件，页面的其他部分都是服务端组件。不要把整个页面都标记为客户端组件，那样就失去了RSC的优势。

3. 数据获取的位置

尽量在服务端组件中获取数据，而不是在客户端组件中。服务端组件获取数据更快（离数据源近，没有网络往返），而且不需要把数据通过API暴露给客户端，更安全。

如果客户端组件需要数据，可以通过props从服务端组件传递，或者在客户端组件中用SWR、React Query等库获取。

4. 第三方库的兼容性

很多第三方库默认使用了浏览器API或状态钩子，不能直接在服务端组件中使用。如果需要用这样的库，要么把使用它的组件标记为客户端组件，要么找支持RSC的替代库。

Next.js提供了一些处理方式，比如用dynamic导入并设置ssr: false，但这会影响性能，尽量少用。

5. 不要过早优化

RSC是一个强大的工具，但不是所有应用都需要。如果你的应用是内部管理系统、用户量不大、JS体积不大，传统的客户端渲染可能就够了。RSC适合内容多、首屏性能要求高、SEO重要的应用，比如电商、博客、内容站等。

六、RSC的优势和局限

优势：

  • 减少客户端JS体积：服务端组件不打包到客户端，只发送必要的客户端组件
  • 更快的首屏：数据在服务端获取，没有瀑布流，流式渲染让用户更快看到内容
  • 简化数据获取：直接在组件中async/await获取数据，不需要状态管理和副作用
  • 更好的安全性：服务端组件可以直接访问数据库和密钥，不需要把敏感信息暴露给客户端
  • 更好的开发者体验：组件即数据获取，代码更简洁，逻辑更清晰

局限：

  • 生态还在发展中，不是所有库都支持RSC
  • 学习曲线，需要理解服务端和客户端的边界
  • 调试比传统客户端渲染复杂
  • 目前主要通过Next.js使用，其他框架的支持还在跟进
  • 对于纯交互型应用（如Figma、在线编辑器），RSC的优势不明显

七、学习路径建议

如果你想系统学习RSC，建议按这个路径：

  1. 先掌握React基础，理解组件、props、state、hooks等概念
  2. 了解传统的客户端渲染和服务端渲染，理解它们的优缺点
  3. 读React官方博客关于RSC的介绍文章，理解设计思想
  4. 用Next.js App Router做一个项目，比如博客或电商站点，实践服务端组件和客户端组件的组合
  5. 学习数据获取、缓存、重新验证等进阶概念
  6. 研究RSC的序列化格式和渲染原理，深入理解底层机制

推荐资源：

  • React官方文档的Server Components章节
  • Next.js官方文档的App Router部分
  • React团队的RSC演示视频和演讲
  • Next.js Conf上关于RSC的分享

八、写在最后

React Server Components是React近年来最重要的更新之一，它改变了React组件的执行模型，让服务端和客户端的分工更合理。它不是要取代客户端组件，而是让你能根据需要选择合适的组件类型，在性能和交互之间找到最佳平衡。

对于前端开发者来说，RSC是一个需要掌握的新特性。它不只是一个API，更是一种新的思考方式：哪些逻辑应该在服务端，哪些应该在客户端，如何组合它们来构建高性能的应用。

当然RSC还在发展中，生态和工具链还在完善，但它的方向是明确的，未来会成为React应用开发的主流模式。建议大家尽早了解和实践，跟上技术发展的步伐。

希望这篇入门指南能帮你快速理解RSC的核心概念，迈出学习的第一步。如果有问题欢迎在评论区交流讨论。