0Pricing
React Academy · 课时

React Server Components 详解

了解 RSC 是什么、它们与客户端组件有何不同，以及何时使用各自的类型。

React Server Components 详解 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

本课将介绍 React 服务器组件（RSC）是什么、它们与客户端组件有何不同，以及何时使用每种类型。

两种组件世界

React 19 和 Next.js App Router 将组件分为两个世界：**服务器组件**（在服务器上渲染，没有交互功能）和**客户端组件**（在服务器和客户端上都渲染，拥有状态和事件处理器）。

默认使用服务器组件

在 Next.js App Router 中，每个组件默认都是服务器组件。您可以在文件顶部添加 'use client'，选择使用客户端组件模式。
// Server Component (default, no directive needed)
export default async function Page() {
  const data = await fetch('/api/posts').then(r => r.json());
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

客户端组件

在文件顶部添加 'use client'，即可将其设为客户端组件。客户端组件可以使用 useState、useEffect、事件处理器和浏览器 API。
'use client';
import { useState } from 'react';

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n+1)}>{n}</button>;
}

服务器组件的能力

服务器组件可以：等待数据库查询、读取文件系统、访问环境机密、导入大型的仅限服务器使用的软件包，并在不向客户端发送任何 JavaScript 的情况下进行渲染。
// Fetch from DB directly in the component!
import { db } from '@/lib/db';

export default async function UserList() {
  const users = await db.select().from(usersTable);
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

服务器组件的限制

服务器组件 CANNOT：使用 useState、useEffect、事件处理器（onClick 等）、浏览器 API（window、localStorage）或 Context。这些功能需要 'use client'。

组合服务器组件与客户端组件

常见模式是：服务器组件获取数据，并将其作为属性传递给客户端组件。服务器负责数据，客户端负责交互。
// Server Component
export default async function Page() {
  const user = await getUser();
  return <ProfileEditor user={user} />; // client component
}

// Client Component (separate file)
'use client';
export function ProfileEditor({ user }) {
  const [name, setName] = useState(user.name);
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

客户端边界规则

一旦将文件标记为 'use client'，其中导入的所有组件也会被视为客户端组件。服务器与客户端之间的边界位于文件级别。

服务器组件无需 JavaScript

服务器组件在服务器上渲染为 HTML。它们的组件代码 NEVER 会发送到浏览器。这会显著减小 JavaScript 包的大小。

服务器组件与 SSR

传统 SSR 将完整页面渲染为 HTML，但会将所有组件代码发送到客户端以进行激活。服务器组件完全不会将自身代码发送到客户端——只发送渲染后的输出。

快速检查

在 Next.js App Router 中，要将文件设为 React 客户端组件，需要添加什么指令？

回顾

服务器组件在服务器上运行，可以访问数据库和机密信息，并且不会向客户端发送 JS。客户端组件添加 'use client'，支持状态、效果和事件处理器。将它们组合起来：服务器负责获取数据，客户端负责交互。

接下来

下一课：**用于异步资源的 use() 钩子**——您将使用 React 19 的 use() 钩子在渲染过程中读取 Promise 和上下文。

常见问题解答

「React Server Components 详解」课时是免费的吗？

是的 — 「React Server Components 详解」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「React Server Components 详解」这节课中我会学到什么？

了解 RSC 是什么、它们与客户端组件有何不同，以及何时使用各自的类型。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「React Server Components 详解」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. React Server Components 详解
  2. 使用 use() 钩子读取异步资源
  3. React Actions 与 useActionState
  4. 使用 useOptimistic 实现即时反馈
← 返回 React Academy