「React」RSC 服务端组件

前言

RSC（React Server Components）是React框架的一个新特性，它允许开发者编写只在服务器端渲染的组件。与传统的服务器端渲染（SSR）不同，RSC的目标是提升性能和用户体验，同时减少客户端加载的JavaScript代码的体积。

使用示例

如何在一个项目中使用React Server Components和客户端组件协同工作：

服务端组件示例 (UserList.server.js)

这个服务端组件负责从服务器获取用户列表，并将其渲染成无状态的HTML。

// UserList.server.js
import React from 'react';
import { fetchUserList } from './api';

function UserList() {
  const users = fetchUserList(); // 假设这是服务器端的数据获取函数
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

客户端组件示例 (UserPage.client.js)

客户端组件包含状态和交互逻辑。例如，在此例中，组件响应用户的点击事件。

// UserPage.client.js
import React, { useState } from 'react';
import UserDetails from './UserDetails.client';
import UserList from './UserList.server';

function UserPage() {
  const [selectedUserId, setSelectedUserId] = useState(null);

  const handleUserClick = (userId) => {
    setSelectedUserId(userId);
  };

  return (
    <div>
      <UserList onUserClick={handleUserClick} />
      {selectedUserId && <UserDetails userId={selectedUserId} />}
    </div>
  );
}

export default UserPage;

在这个简单的场景中，UserPage.client.js 能够导入并且利用UserList.server.js，即使UserList是在服务器上渲染的。UserPage还管理着用户的选择状态，并根据该状态显示UserDetails组件。

好处

• 数据获取快，可以直接在Node端读取数据，塞给组件
• 更安全，比如密钥等等不方便暴露给客户端
• 服务器组件生成结果可缓存
• 减少JS bundle包大小，服务器组件在客户端无需打包进JS
• 更快的FCP
• Streaming优化，html页面实际上是可以分为多个chunk输出给用户的