React 服务器组件 (RSC)

文章目录

• 前言
• • • 1. 什么是服务器组件 (Server Components)?
    • 2. 服务器组件的核心规则
    • • (1) 异步性 (`async/await`)
      • (2) 无客户端交互
      • (3) 渲染限制
    • 3. 与客户端组件的协作
    • • 组合模式
      • Props 传递规则
    • 4. 使用场景
    • 5. 文件命名约定
    • 6. 常见误区
    • 7. 示例代码
    • • 服务端组件（获取数据）：
      • 客户端组件（处理交互）：
    • 关键总结

前言

React 官方文档中 server-components 页面详细解释了 React 服务器组件 (RSC) 的核心概念、规则和使用场景。以下是该页面的核心内容解析：

1. 什么是服务器组件 (Server Components)?

• 运行环境：仅在服务端执行，不会将组件代码（JSX、逻辑、依赖）发送到客户端。
• 目的：
  • 减少客户端 JS 体积，提升加载性能。
  • 直接访问服务端资源（数据库、API、文件系统）。
  • 自动代码分割，避免手动优化。
• 输出：将渲染后的 UI 描述（非可交互 JS） 发送给客户端，类似 HTML 流。

2. 服务器组件的核心规则

(1) 异步性 (async/await)

• 所有服务器组件必须是 async 函数，可使用 await 直接获取数据：

async function MyServerComponent() {
const data = await fetchData(); // 直接访问数据库/API
return <div>{data}</div>;
}

export default async function RootLayout({ children, params }) {
const resolvedParams = await params;
const { serializedResources } = await getTranslation(resolvedParams.locale, "common");
// …渲染逻辑
}

这里直接在组件体内用 await 获取服务端数据，然后将数据传递给子组件。

(2) 无客户端交互

• 禁止使用 Hooks：如 useState, useEffect, useContext 等。
• 无浏览器 API：无法访问 window, document, localStorage。
• 无事件处理：不能定义 onClick, onChange 等交互逻辑。

Server Component（服务器组件）：

• 只能在服务器端渲染，不能包含如 useState、useEffect、事件处理（如 onClick）等客户端交互逻辑。
• 不能访问浏览器 API（如 window、document）。
• 只能通过 props 向下传递数据，不能响应用户在浏览器中的直接操作。
• 适合做数据获取、服务端渲染、静态内容输出等。

Client Component（客户端组件）：

• 以 ‘use client’ 开头，可以使用 React 的所有客户端特性（如 useState、useEffect、事件处理等）。
• 可以访问浏览器 API。
• 适合做交互、动画、表单、按钮等需要响应用户操作的内容。

(3) 渲染限制

• 只能返回 可序列化数据 或 客户端组件：// ✅ 合法：传递数据给客户端组件
  function ServerComponent() {
  return <ClientComponent data={…} />;
  }

  // ❌ 非法：直接渲染浏览器 API 相关组件
  function InvalidComponent() {
  return <input onChange={…} />; // 事件处理只能在客户端
  }

3. 与客户端组件的协作

组合模式

• 服务器组件可作为 父组件 渲染客户端组件：

// ServerComponent.server.js
import ClientComponent from './ClientComponent.client';

export default function ServerComponent() {
return (
<div>
<h1>服务端渲染</h1>
<ClientComponent /> {/* 嵌套客户端组件 */}
</div>
);
}

<I18nProviderWrapper locale={resolvedParams.locale} initialResources={serializedResources}>
{children}
</I18nProviderWrapper>

src/components/I18nProviderWrapper.tsx 是一个客户端组件（文件顶部有 ‘use client’），它被服务器组件 layout.tsx 作为子组件直接渲染。符合 Next.js 推荐的分层架构（Server Component 作为父，Client Component 作为子）

Props 传递规则

• 传递给客户端组件的 props 必须是 可序列化的：
  • ✅ 基本类型：string, number, boolean
  • ✅ 简单对象/数组
  • ✅ JSX（作为 children）
  • ❌ 函数、类实例、Symbol 等不可序列化数据。

4. 使用场景

5. 文件命名约定

• 服务端组件：*.server.js (或 .server.jsx, .server.tsx)
• 客户端组件：*.client.js (或 .client.jsx, .client.tsx)
• 通用组件：无后缀，但需在客户端组件中显式导入。

6. 常见误区

• 误区：“服务端组件可替代 SSR”。
  • 纠正：RSC 与 SSR 互补：
    • SSR：将客户端组件初始 HTML 快速渲染到浏览器。
    • RSC：在服务端生成静态内容，减少客户端负担。
• 误区：“服务器组件可处理用户交互”。
  • 纠正：交互必须交给客户端组件处理。

7. 示例代码

服务端组件（获取数据）：

// ProductDetails.server.js
async function ProductDetails({ id }) {
const product = await db.products.get(id); // 直接访问数据库
return (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
<ProductImage image={product.image} /> {/* 客户端组件 */}
</div>
);
}

客户端组件（处理交互）：

// ProductImage.client.js
'use client'; // 标记为客户端组件

function ProductImage({ image }) {
const [zoomed, setZoomed] = useState(false);
return (
<img
src={image.url}
onClick={() => setZoomed(!zoomed)}
className={zoomed ? 'zoomed' : ''}
/>
);
}

关键总结

通过合理组合 Server Components（内容） + Client Components（交互），可构建高性能的 React 应用。建议结合 Next.js App Router 实践以体验完整 RSC 工作流。