# Next.js 中的 React 服务器组件 ## 概述 React 服务器组件 (RSC) 允许组件在服务器上呈现，从而减少客户端 JavaScript 并实现直接数据访问。在 Next.js App Router 中，默认情况下所有组件都是服务器组件。 ## 服务器与客户端组件 ### 服务器组件（默认）服务器组件仅在服务器上运行： // app/users/page.tsx（服务器组件 - 默认）异步函数 UsersPage() { const users = wait db.user.findMany() // 直接数据库访问返回（

{user.name}

） } **好处：** * 直接数据库/文件系统访问 * 在服务器上保留敏感数据（API 密钥、令牌） * 减少客户端包大小 * 自动代码分割 ### 客户端组件添加“use client”指令以实现交互： // 组件/counter.tsx “使用客户端” 从 'react' 导入 { useState } 导出函数 Counter() { const [计数，setCount] = useState(0) 返回（ <按钮 onClick={() => setCount(count + 1)}> 计数：{计数} ） } **使用客户端组件用于：** * `useState`, `useEffect`, `useReducer` * 事件处理程序（`onClick`、`onChange`） * 浏览器 API（“窗口”、“文档”） * 带有状态的自定义钩子 ## 心智模型将组件树视为具有“客户端边界”：服务器组件 (page.tsx) ├── 服务器组件（header.tsx） ├── 客户端组件（'使用客户端'）←边界 │ ├── 客户端组件（子级） │ └── 客户端组件（子） └── 服务器组件（footer.tsx） **关键规则：** 1. 服务器组件可以导入客户端组件 2. 客户端组件无法导入服务器组件 3. 您可以将服务器组件作为“子组件”传递给客户端组件 ## 组合模式 ### 模式 1：服务器数据 → 客户端交互在服务器组件中获取数据，传递给客户端： // app/products/page.tsx（服务器）从 './product-list' 导入 { ProductList } 导出默认异步函数 ProductsPage() { 常量产品 = 等待 getProducts() 返回 } // app/products/product-list.tsx（客户端） “使用客户端” 导出函数 ProductList({ 产品 }: { 产品: 产品[] }) { const [过滤器，setFilter] = useState('') const 过滤 = products.filter(p => p.name.includes(过滤器) ）返回（ <> setFilter(e.target.value)} /> {filtered.map(p => )} ） } ### 模式 2：子级作为服务器组件通过 Children 属性传递服务器组件： // 组件/client-wrapper.tsx “使用客户端” 导出函数 ClientWrapper({ 孩子 }: { 孩子: React.ReactNode }) { const [isOpen, setIsOpen] = useState(false) 返回（

{isOpen && Children} {/* 服务器组件内容 */}

） } // app/page.tsx（服务器）从 '@/components/client-wrapper' 导入 { ClientWrapper } 从 '@/components/server-content' 导入 { ServerContent } 导出默认函数 Page() { 返回（ <客户端包装器> {/* 在服务器上渲染！ */} ） } ### 模式 3：复杂布局的插槽使用多个子槽： // 组件/dashboard-shell.tsx “使用客户端” 接口道具 { 侧边栏：React.ReactNode 主要：React.ReactNode } 导出函数 DashboardShell({ sidebar, main }: Props) { const [折叠，setCollapsed] = useState(false) 返回（

{!collapsed && } <主>{主}

） } ## 数据获取 ### 异步服务器组件服务器组件可以是异步的： // 应用程序/帖子/page.tsx 导出默认异步函数 PostsPage() { const posts = wait fetch('https://api.example.com/posts') .then(res => res.json()) 返回（

{post.title}

） } ### 并行数据获取并行获取多个资源：导出默认异步函数 DashboardPage() { const [用户、帖子、分析] =等待 Promise.all([ 获取用户(), 获取帖子(), 获取分析（）， ]）返回（ <仪表板用户={用户}帖子={帖子}分析={分析}/> ） } ### 充满悬念的直播流慢速组件：从 'react' 导入 { Suspense } 导出默认函数 Page() { 返回（

{/* 立即渲染 */} <悬念后备={}> {/* 准备好后进行流式传输 */}

） } ## 决策指南 **在以下情况下使用服务器组件：** * 获取数据 * 访问后端资源 * 在服务器上保留敏感信息 * 减少客户端 JavaScript * 组件没有交互性 **在以下情况下使用客户端组件：** * 使用状态（`useState`、`useReducer`） * 使用效果（`useEffect`） * 使用事件监听器 * 使用浏览器API * 使用带有状态的自定义钩子 ## 常见错误 1. **不要**不必要地添加“使用客户端” - 它会增加包大小 2. **不要**尝试将服务器组件导入客户端组件 3. **Do** 在边界处序列化数据（无函数、类或日期） 4. **一定**使用子模式进行组合 ## 资源详细模式请参见： * `references/server-vs-client.md` \- 完整的比较指南 * `references/composition-patterns.md` \- 高级组合 * `examples/data-fetching-patterns.md` \- 数据获取示例

服务器组件

包含技能