SuperAPI AI 工具集

server-components

通用与其它

查看项目

更新于 10-16 03:37

技能介绍

用途:在 React 19 应用中实现、审查、调试和重构 TanStack Start React Server Components(RSC)。核心理念是把 TanStack Start RSC 当作可获取的 React Flight 载荷,而非框架拥有的服务端树,先确定数据归属与缓存归属,再选择最小的 RSC 原语。

主要能力:检查 vite.config.* 中的 tanstackStart({ rsc: { enabled: true } })、rsc() 与 viteReact();检查路由文件中的 loader、loaderDeps、staleTime、ssr、errorComponent;识别服务端边界(createServerFn、createServerOnlyFn、.server.*、@tanstack/react-start/server 导入);判定缓存归属(Router loader 缓存、TanStack Query 或 HTTP/服务端缓存)与刷新路径(router.invalidate()、invalidateQueries、refetchQueries 或 GET 缓存头)。

使用方式:按需选择组合原语——无需客户端插槽用 renderServerComponent;需在服务端渲染标记内插入交互用 createCompositeComponent;需自定义 Flight 流或非标准传输用 renderToReadableStream、createFromReadableStream、createFromFetch。缓存方面:路由形状数据用 Router 缓存,独立键空间或后台重取用 TanStack Query,跨请求复用用 GET createServerFn 加响应缓存头。刷新方面:Router 拥有的 RSC 用 router.invalidate(),Query 拥有的用 invalidateQueries 或 refetchQueries;混合两者需分别失效。

关键约束:路由 loader 是同构的,不得直接放数据库访问、密钥或仅 Node API;若 loader 需浏览器 API,则该路由设 ssr: false。renderServerComponent 返回可渲染片段,不支持插槽。Query 缓存的 RSC 值需 structuralSharing: false。插槽载荷在服务端不透明,不得检查、映射或克隆 props.children;如需检查应改为 render prop。render-prop 与组件插槽参数必须保持 Flight 可序列化。当前校验 API 为 .validator(...),旧片段需归一化。TanStack 自定义序列化暂不适用于 RSC 内部。

适用场景:简单服务端片段、交互插槽、Query 管理的 RSC、多独立 RSC、需隔离组件失败或错峰显示等。限制:资料未提供收费、价格与具体平台支持信息。