React Server Component 和 Client Component 怎么划分边界？

Question

仓乃文 · Accepted Answer

Server Component 在服务端渲染，不能使用 useState、useEffect 等客户端 Hook，但可以直接访问数据库和文件系统。Client Component 用 "use client" 声明，可以使用所有 Hook 和浏览器 API。划分原则：尽量让组件留在服务端，只在需要交互时才划到客户端。划分原则： ```javascript // Server Component（默认）：数据获取、静态内容、无交互 async function ArticleList() { const articles = await db.article.findMany(); // 直接查数据库 return (

{a.title}

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

{article.title}

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

{article.content}

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

); } ``` 补充说明： - Server Component 不能用 useState、useEffect、onClick 等客户端特性 - Client Component 不能直接调用 async（不能是 async function 组件） - Server Component 可以向 Client Component 传递序列化 props（不能传函数/类实例） - "use client" 边界以下的所有子组件都是 Client Component - 常见错误：在 Server Component 中导入 "use client" 模块并传递函数 props