用途：用于 Next.js App Router 与 React 的架构设计、服务端与客户端组件边界划分、数据获取位置决策，以及水合、缓存、渲染问题排查和 Core Web Vitals 与打包体积优化。
核心原则：默认使用服务端组件，仅在需要交互、浏览器 API 或 React 状态/副作用的叶子节点加 "use client"，保持客户端包精简；在服务端靠近渲染处取数，向下传递可序列化的普通 props，并靠请求记忆化去重。
数据、缓存与变更：用异步服务端组件配合 fetch 或 ORM 调用，显式设置缓存意图（cache、revalidate 或 dynamic），不依赖未理解的默认值；用 Server Actions 处理变更，写入后重新验证相关路径或标签；用 <Suspense> 与 loading.tsx 流式渲染慢数据，避免整条路由被单个查询阻塞。
渲染策略：能静态就静态，必要时动态，有帮助时流式；用 generateStaticParams 处理已知动态路由，用 ISR/重新验证保持数据新鲜但可缓存；layout.tsx 承载共享外壳，有意识地使用路由组与并行/拦截路由。
状态管理：优先使用 URL 状态（搜索参数）与服务端状态，少用全局客户端存储；仅在真正客户端侧、跨树交互时使用客户端状态库；避免用 useEffect 取数，也避免重复渲染逻辑的副作用。
性能与 Web Vitals：用 next/image 优化图片，用 next/font 加载字体防止布局偏移；对重型仅客户端组件用动态导入做代码分割；度量 LCP、INP、CLS，把打包分析器当作常规工具。
质量与无障碍：TypeScript 严格模式，为 props、action 输入、API 响应等边界加类型；使用语义化 HTML，仅当语义不足时用 ARIA，保证交互可键盘操作；用 error.tsx 边界处理加载、空与错误状态。
检查清单：每个 "use client" 是否必要且下推到叶子；数据源缓存与重新验证意图是否显式；变更是否为会重新验证正确路径/标签的 Server Actions；异步 UI 是否有加载与错误边界；图片、字体、第三方脚本是否优化；改动是否保持客户端包精简。
应标记的反模式：为一个交互按钮把大子树标为 "use client"；本可用服务端组件却用 useEffect 取数；隐式依赖默认缓存却对过期或动态行为感到意外；跨越服务端/客户端边界传递密钥或不可序列化值。具体安装或调用命令暂未提供。