什么是 React Server Components，它们与 client components 有何不同？

Question

Accepted Answer

**Server Components (RSC)** 在**服务器**上渲染，并将序列化结果发送到浏览器。它们为自己发送**零 JavaScript** — 仅数据/标记，而非它们的代码。 ## 两种类型 ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## 功能和限制 | | Server Component | Client Component | |---|---|---| | 可以 `await` / 直接获取数据 | ✅ | ❌ | | 访问服务器资源/机密 | ✅ | ❌ | | `useState`/`useEffect`/事件 | ❌ | ✅ | | 向浏览器发送 JS | ❌ (零) | ✅ | ## 为什么这很重要 - **更少的客户端 JavaScript** → 更快的加载和交互性。 - **数据获取靠近源** (无来自浏览器的 API 往返，无暴露数据库凭证)。 - 您**组合**它们：服务器组件为交互式"岛屿"渲染客户端组件。服务器组件可以渲染一个客户端组件，但**不能**反向。 ## 陷阱跨服务器→客户端边界传递的 Props 必须**可序列化** — 您无法传递函数或类实例。RSC 将思维模型从"一切都在浏览器中运行"改变为"默认在服务器上渲染，仅在需要交互性的地方选择进入客户端"。

	Server Component	Client Component
可以 `await` / 直接获取数据	✅	❌
访问服务器资源/机密	✅	❌
`useState`/`useEffect`/事件	❌	✅
向浏览器发送 JS	❌ (零)	✅