React 服务器端功能详解
本文档概述了 React 服务器组件 (RSC) 和服务器函数的核心概念及使用方法。
核心概念
- 服务器组件 (RSC): 在服务器端运行并渲染为客户端 html 的组件。类似于服务器端渲染 (SSR)，但效率更高。
- 服务器函数 (服务器操作): 仅在服务器端执行，并将数据传递给客户端的函数。
关键指令
- ‘use client’：用于标记客户端组件。在启用 RSC 的环境中，此指令必须位于文件顶部。
- ‘use server’：用于标记服务器函数。此指令必须位于服务器组件的函数体或独立服务器函数文件的顶部。
服务器组件
- RSC 没有状态或生命周期方法。无法在 RSC 中使用诸如 useState、useEffect 等 Hook。
- RSC 可以包含异步函数。
- RSC 可以调用服务器函数，但必须在函数体顶部使用 ‘use server’ 指令。
- RSC 可以包含服务器组件和客户端组件作为子组件。
- RSC 无法直接访问浏览器 API。
- RSC 可以接收任何类型的 props，并将其传递给客户端组件。 下表列出了支持的 prop 类型。
示例：在服务器组件中读取并渲染 Markdown 文件
import marked from 'marked'; // 不包含在打包文件中 import sanitizeHtml from 'sanitize-html'; // 不包含在打包文件中 async function page({ page }) { // 注意：在构建应用程序时，*渲染期间*加载。 const content = await file.readFile(`${page}.md`); return <div>{sanitizeHtml(marked(content))}</div>; }
服务器函数
- 定义服务器函数时，必须在函数体或文件中使用 ‘use server’ 指令。
- 服务器函数可以在服务器端执行任何操作。
- 服务器函数无法访问浏览器 API。
- 服务器函数可以在服务器端和客户端调用。
- 服务器函数的返回值类型有限制。请参考下表。
示例：在服务器组件中声明服务器函数
import Button from './button'; function EmptyNote() { async function createNoteAction() { // 服务器函数 'use server'; await db.notes.create(); } return <Button onClick={createNoteAction} />; }
示例：在独立文件中声明服务器函数
"use server"; export async function updateName(name) { if (!name) { return { error: 'name is required' }; } await db.users.updateName(name); }
示例：在客户端组件中使用服务器函数
"use client"; import { updateName } from './actions'; function UpdateName() { return ( <form action={updateName}> <input name="name" type="text" /> </form> ); }
数据类型兼容性
下表总结了 use client 和 use server 上下文中支持的数据类型：
| 类型 | `use client` | `use server` | 备注 |
|---|---|---|---|
| 字符串 | ✅ | ✅ | 支持字符串值和可迭代对象。 |
| 数字 | ✅ | ✅ | |
| BigInt | ✅ | ✅ | |
| 布尔值 | ✅ | ✅ | |
| undefined | ✅ | ✅ | |
| null | ✅ | ✅ | |
| 数组 | ✅ | ✅ | 仅限于可序列化列表的项。 |
| map | ✅ | ✅ | 仅限于可序列化列表的项。 |
| Set | ✅ | ✅ | 仅限于可序列化列表的项。 |
| TypedArray | ✅ | ✅ | |
| ArrayBuffer | ✅ | ✅ | |
| Date | ✅ | ✅ | |
| 对象 | ✅ | ✅ | 仅支持普通对象（对象初始化器或 json），不支持 NULL 原型。 |
| promise | ✅ | ✅ | 仅限于可序列化列表的项。 |
| React 节点 | ✅ | ❌ | 只有服务器组件可以通过 props 将其传递到客户端组件。 |
| FormData | ❌ | ✅ | 只有服务器函数才能返回 FormData 实例。 |
| symbol | ⚠️ | ⚠️ | 仅支持通过 `Symbol.for` 注册到全局 Symbol 注册表中的 Symbol。 |
| 函数 | ⚠️ | ⚠️ | 仅允许服务器函数。 |
| 类 | ❌ | ❌ | 任何实例对象都是不可序列化的。 |
其他类型和实例对象不可用。
希望以上信息对您有所帮助!
