React Server Components (RSC) 仅在服务器上 render — 它们的 JavaScript 永远不会发送到浏览器。在 App Router 中，每个组件默认都是 Server Component；你需要显式选择进入客户端行为。
Server Component 能做什么
tsx
db ;
() {
users = db..();
(
);
}
Server Components 可以是 async，直接 await 数据，并访问服务器专用资源（数据库、文件系统、secrets） — 因为它们在服务器上运行。无需 API 层来获取数据，secrets 永远不会到达客户端。
浏览器接收 渲染的 HTML/UI，而不是组件的代码或其依赖项。使用重型 markdown 或日期库的 Server Component 根本不会将 任何 该库发送到浏览器 — 大幅减少 bundle 大小。
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
没有交互性、状态、effects 或浏览器 API — 这些需要 Client Component。
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
模式：Server Components 处理数据/结构；仅在需要交互性的地方嵌入 Client Components（"islands"）。
Server Components 是 App Router 的定义性特性。
它们减少客户端 bundle 大小（更少的 JS 下载/解析），允许直接、安全的服务器端数据访问而无需 API，并改进性能和 SEO。
了解它们是默认的 — 以及什么使组件成为 Client Component — 对于有效地结构化 App Router 应用至关重要。