概述
React Server Components（RSC）是 React 团队引入的一项新技术，旨在优化应用的性能和开发体验。它允许开发者在服务器端渲染部分组件，而不是将所有组件都运行在浏览器端。这样可以减少客户端需要下载和执行的 JavaScript 代码量，同时提高页面加载速度和用户体验。
什么是 React Server Components？
React Server Components 是一种特殊类型的 React 组件，这些组件只在服务器上渲染，不会被发送到客户端。这意味着它们无法包含浏览器特定的功能（如事件处理器、浏览器 API 等），但可以直接从服务器获取和渲染数据，从而简化数据获取逻辑。
与传统的客户端组件（Client Components）不同，Server Components 不会增加客户端的 JavaScript 负担，因为它们的渲染结果是纯 HTML，可以直接发送给浏览器展示。
为什么需要 React Server Components？
在现代 Web 应用中，通常需要在客户端和服务器之间进行数据交换。使用传统的客户端渲染（CSR）方式，所有组件都在浏览器中执行，这可能导致以下问题：
较大的 JavaScript 负载：所有组件的代码都需要发送到客户端，增加了初始加载时间。 复杂的数据获取逻辑：需要在客户端请求数据，然后通过 props 传递给组件，可能导致重复请求或难以管理的数据流。 性能瓶颈：对于数据密集型应用，频繁的客户端渲染可能影响性能。 React Server Components 旨在解决这些问题，通过将部分组件迁移到服务器端渲染，减少客户端的 JavaScript 负载，并简化数据获取过程。
React Server Components 的优点
- 减少客户端 JavaScript 体积：不必要的组件代码不会发送到客户端，提升加载速度。
- 优化数据获取：可以在服务器端直接访问数据库或其他数据源，避免在客户端进行额外的数据请求。
- 提高性能：服务器通常比客户端拥有更强的计算能力，能够更快地渲染组件。
- 更好的 SEO 支持：服务器端渲染的内容更容易被搜索引擎索引。
如何使用 React Server Components？
要使用 React Server Components，你需要安装最新的 React 版本（18+），并确保你的服务器支持 Node.js。
1. 创建 Server Component
创建一个简单的服务器组件来获取数据并渲染。
// app/components/UserList.server.jsx
import React from 'react';
// 假设有一个获取用户数据的函数
async function fetchUsers() {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
return res.json();
}
const UserList = async () => {
const users = await fetchUsers();
return (
<div>
<h2>用户列表</h2>
<ul>
{users.map(user => (
<li key={user.id}>
{user.name} ({user.email})
</li>
))}
</ul>
</div>
);
};
export default UserList;
2. 创建 Client Component
// app/components/ClientComponent.client.jsx
'use client';
import React, {useState} from 'react';
const ClientComponent = () => {
const [time, setTime] = useState(null);
const showTime = () => {
const now = new Date().toLocaleTimeString();
setTime(now);
};
return (
<div>
<button onClick={showTime}>显示当前时间</button>
{time && <p>当前时间: {time}</p>}
</div>
);
};
export default ClientComponent;
3. 在页面中使用 Server Component 和 Client Component
// app/page.jsx
import React from 'react';
import UserList from './components/UserList.server';
import ClientComponent from './components/ClientComponent.client';
const HomePage = () => {
return (
<div>
<h1>欢迎来到我的应用</h1>
<UserList />
<ClientComponent />
</div>
);
};
export default HomePage;
Nextjs 官方示例：
