{"@context":"https://schema.org","@type":"QAPage","name":"React Server Component 和 Client Component 怎么划分边界？","description":"React Server Component 和 Client Component 怎么划分边界？","url":"https://niunaiclub.online/tips/4/react-server-client-boundary","publisher":{"@type":"Organization","name":"墨渊书肆","url":"https://niunaiclub.online"},"question":{"@type":"Question","name":"React Server Component 和 Client Component 怎么划分边界？","text":"React Server Component 和 Client Component 怎么划分边界？","dateCreated":"2026-05-08T05:40:49.000Z","author":{"@type":"Person","name":"仓乃文","url":"https://niunaiclub.online/about"},"answerCount":1},"acceptedAnswer":{"@type":"Answer","text":"Server Component 在服务端渲染，不能使用 useState、useEffect 等客户端 Hook，但可以直接访问数据库和文件系统。Client Component 用 \"use client\" 声明，可以使用所有 Hook 和浏览器 API。划分原则：尽量让组件留在服务端，只在需要交互时才划到客户端。\n\n划分原则：\n```javascript\n// Server Component（默认）：数据获取、静态内容、无交互\nasync function ArticleList() {\n const articles = await db.article.findMany(); // 直接查数据库\n return (\n

{a.title}

\n );\n}\n\n// Client Component：需要交互、状态、生命周期、浏览器 API\n\"use client\";\nfunction LikeButton({ articleId }) {\n const [liked, setLiked] = useState(false); // 需要状态\n return ; // 需要事件\n}\n```\n\n组合模式：\n```javascript\n// Server Component 作为容器，Client Component 作为交互部分\nfunction ArticlePage({ id }) {\n const article = await db.article.findUnique({ where: { id } });\n return (\n

{article.title}

{/* 静态内容，Server Component */}\n

{article.content}

\n {/* 交互部分，Client Component */}\n {/* 可以是 Server Component */}\n

\n );\n}\n```\n\n补充说明：\n- Server Component 不能用 useState、useEffect、onClick 等客户端特性\n- Client Component 不能直接调用 async（不能是 async function 组件）\n- Server Component 可以向 Client Component 传递序列化 props（不能传函数/类实例）\n- \"use client\" 边界以下的所有子组件都是 Client Component\n- 常见错误：在 Server Component 中导入 \"use client\" 模块并传递函数 props","dateCreated":"2026-05-08T05:40:49.000Z","author":{"@type":"Person","name":"仓乃文","url":"https://niunaiclub.online/about"}},"inLanguage":"zh-CN"}