Frontend Academy · 课时

服务器组件与客户端组件

了解 React 服务器组件，掌握何时添加 'use client' 指令，以及如何将服务器渲染的 HTML 与可交互的客户端岛屿结合起来。

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

一个应用中的两个世界

React 服务器组件（RSC）可以让您在服务器渲染部分和客户端交互部分之间拆分组件树。在 Next.js 应用路由器中，组件默认为服务器组件；使用 'use client' 选择客户端组件。

服务器组件的作用

服务器组件只在服务器上运行。它们可以：直接获取数据、访问文件系统、使用仅限服务器端的机密信息，以及渲染为 HTML 而无需将 React 发送到客户端。它们不能：使用钩子、管理状态或处理事件。

客户端组件的作用

客户端组件会在服务器上用于 SSR（初始 HTML），并在客户端上用于交互。它们可以：使用 useState、useEffect、事件处理程序和浏览器 API。

默认是服务器组件

在 Next.js 应用路由器中，每个组件默认都是服务器组件。这非常理想——您的应用大部分内容都可以进行静态渲染。

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

选择使用客户端组件

在文件顶部添加 'use client'，即可将其中的组件及其导入的内容标记为客户端组件。

// app/Counter.tsx
'use client';

import { useState } from 'react';

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

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

服务器组件可以渲染客户端组件，但客户端组件不能导入服务器组件。请将服务器渲染的内容作为子元素传递给客户端包装器。

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

这一模式为何重要

更小的 JS 包——只有客户端组件会发送到浏览器。直接访问数据库或文件——对于只读数据无需应用程序接口层。更好的搜索引擎优化和更快的 LCP——HTML 到达时已经完成渲染。

客户端边界规则

文件一旦标记为“use client”，该文件中的所有组件及其导入的子组件都会成为客户端组件。“use client”标记了服务器与客户端之间的边界。

服务器操作

标记为“use server”的函数只在服务器上运行，但可以从客户端组件调用——类似 RPC。它们通常用于表单提交和数据变更。

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

将属性从服务器传递到客户端

从服务器传递到客户端的属性必须可序列化为 JSON——不能包含函数、类，也不能包含具有自定义结构的日期对象。请在传递之前进行转换。

识别每种组件类型

查看导入内容：useState、useEffect 和 onClick 处理程序会强制组件成为客户端组件。纯数据展示可以保留为服务器组件。

性能提升

服务器组件会大幅缩小 JS 包。一个主要包含静态内容、只有少量交互式小部件的页面，只会发送交互部分所需的 JS——有时可以缩小 90%。

快速检查

以下哪个 React 钩子不能在 Next.js 服务器组件中使用？

回顾：服务器组件与客户端组件

服务器组件：只在服务器上运行，异步/await 可用，不使用钩子、状态或处理程序，包体积更小。客户端组件：使用“use client”选择启用，并通过 useState/useEffect/事件实现交互。服务器可以渲染客户端组件；客户端不能导入服务器组件，但可以接收服务器组件作为子元素。服务器操作（“use server”）用于 RPC 风格的数据变更。

常见问题解答

「服务器组件与客户端组件」课时是免费的吗？

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

「服务器组件与客户端组件」这节课中我会学到什么？

了解 React 服务器组件，掌握何时添加 'use client' 指令，以及如何将服务器渲染的 HTML 与可交互的客户端岛屿结合起来。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「服务器组件与客户端组件」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy