RSC Data Fetching Optimizer 用于优化 Next.js App Router 的数据获取,将缓慢的客户端获取转换为服务端渲染。
用途:排查客户端数据获取反模式并改造为 RSC 服务端获取。
诊断:可用 rg -n "useEffect.*fetch|useState.*loading|useStore()" --type tsx 与 rg -n '"use client"' app/ --type tsx 查找。风险信号:"use client" + useEffect + fetch() 导致首屏慢;isLoading 的 useState(true) 让用户看到加载动画;用 useStore() 或 useContext 获取首屏数据造成瀑布式请求。
三步流程:1)确定首屏所需数据,静态/少变数据放服务端组件,交互数据(筛选、搜索)放客户端组件;2)把含 useInView、useState、onClick 的部分抽到独立客户端组件,数据以 props 传入;3)将页面改为服务端组件(不加 "use client"),用 await 在服务端取数后传给子组件。
类型差异可用 Type Adapter 模式在服务端做映射后再传给前端组件。
仍需保留客户端的场景:实时订阅(如 Supabase realtime)、用户触发的搜索/筛选/分页、依赖客户端状态(auth token、localStorage)的数据、无限滚动/加载更多。
进阶模式(并行取数、Suspense 流式、错误边界、缓存策略、SSR 与客户端混合)见 references/patterns.md。具体安装方式与更多限制资料暂未提供。