用途:指导在 React 与 Next.js 项目中正确放置 "use client" 边界,目标是划定最小可用的客户端边界,让服务端组件尽量保持为服务端组件。
主要能力:说明 "use client" 是导入边界,边界之下被导入的组件都会变成客户端组件;给出何时添加、何时不添加的判断规则;提供从导入链向上追溯、找到首个服务端到客户端跨越点的工作流程;并列出常见错误与处理方式。
使用方式:添加指令需同时满足——组件由服务端组件导入、组件需要 hooks、事件处理器、浏览器 API 或仅客户端库。不要添加的情况包括:父级或导入方已是客户端组件、组件只渲染 props、只使用 children、可在服务端与客户端共享、或只是“以防万一”。流程为:向上追溯导入链,找到首个服务端到客户端跨越点,检查该组件是否需要客户端特性,在此处放置 "use client",移除其下冗余指令,并尽可能把异步数据获取移到边界之上。
适用场景:新增客户端组件、使用 hooks、事件处理器、浏览器 API、仅客户端库,或排查 Hook 只在客户端组件中可用、事件处理器无法从服务端传给客户端、客户端组件不支持 async 等问题。
限制:资料未提供具体版本要求、安装命令、性能数据或平台支持范围;输出应包含边界位置、需添加或移除的指令、数据获取位置以及服务端与客户端 props 问题。