用途：优化 Next.js App Router 项目中缓慢的客户端数据获取，将其转换为服务端获取，实现更快首屏渲染。
主要能力与用法：先做快速诊断，在代码库中搜索反模式，例如执行 rg -n "useEffect.*fetch|useState.*loading|useStore()" --type tsx 与 rg -n '"use client"' app/ --type tsx。危险信号包括："use client" 加 useEffect 加 fetch() 导致首屏慢；用 useState(true) 表示 isLoading 让用户看到加载动画；用 useStore() 或 useContext 获取初始页面数据形成瀑布式请求。
三步转换流程：第一步确认初始渲染所需数据，静态或很少变化的数据用服务端组件，用户交互数据如筛选、搜索用客户端组件；第二步把含 useInView、useState、onClick 的交互区块抽成独立客户端组件，通过 props 接收数据；第三步把页面改为服务端组件，去掉 "use client"，在 async 页面组件中 await 服务端数据获取函数再传给客户端子组件。
类型适配：当数据库类型与前端类型不一致时，可编写适配函数做字段映射与格式转换，例如把 created_at 转为 Date、为可选字段提供默认值，再批量 map 后传入列表组件。
保留客户端获取的情形：实时订阅（如 Supabase realtime）、用户触发式获取（搜索、筛选、分页）、依赖客户端状态的数据（认证 token、localStorage）、无限滚动或加载更多模式。
进阶模式：参考资料 patterns.md，涵盖并行数据获取、配合 Suspense 的流式渲染、错误边界、缓存策略以及 SSR 与客户端混合模式。
限制：资料未提供具体安装命令、依赖版本、性能基准数据及收费信息，相关事实暂未提供。