用途:该技能帮助理解 React Server Components 架构中何时使用、何时不使用 "use client" 指令。核心概念是"边界":"use client" 标记服务端组件与客户端组件之间的边界,而非给单个组件贴标签。一旦进入客户端边界,所有被导入的组件自动成为客户端组件。
主要能力:提供判断规则(组件由服务端组件导入且需要 hooks、事件处理器、浏览器 API 或使用这些的第三方库时才添加指令);区分不应添加的情形(已在客户端边界内、纯展示组件、为保险起见);给出决策流程图和真实示例(如页面含交互搜索筛选区);说明共享纯展示组件的处理方式。
使用方式:在需要创建客户端边界的入口组件顶部添加 "use client",子组件不再重复添加;数据获取留在服务端组件,通过 props 传给客户端组件。
常见错误与修复:"useState only works in Client Components" 需在用到 hook 的组件上加指令或上移;"Event handlers cannot be passed to Client Components from Server Components" 需将事件逻辑移入客户端组件或重构边界;"async/await is not yet supported in Client Components" 需将数据获取保留在服务端组件。
适用场景:为 Next.js 应用添加客户端组件、排查 Server Component 相关报错、重构客户端边界。限制:资料未提供安装方式、版本要求、许可与收费信息。