SuperAPI AI 工具集

react-start/server-components

前端与建站

查看项目

更新于 10-16 00:00

技能介绍

用途:在 TanStack Start + React 19 应用中实现、审查、调试和重构 React Server Components。资料把 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 缓存头)。

硬性约束:路由 loader 是同构的,不得直接放数据库访问、密钥或仅 Node 可用 API;loader 自身若需浏览器 API,则该路由设 ssr: false。renderServerComponent(...) 返回可渲染片段,不支持 slots。createCompositeComponent(...) 用于需要接受客户端 children、render props 或组件 props 的服务端渲染 UI。查询缓存的 RSC 值需要 structuralSharing: false。Slot 载荷在服务端是不透明的,不要检查、映射或克隆 props.children。render prop 与组件 slot 参数须保持 Flight 可序列化。当前服务端函数校验 API 为 .inputValidator(...),旧片段中的 .validator(...) 应规范化。TanStack 自定义序列化暂不适用于 RSC 内部。

决策与模式:无需客户端 slot 用 renderServerComponent;需在服务端标记内插入客户端交互用 createCompositeComponent;需自定义 Flight 流、API 路由或非标准传输用 renderToReadableStream、createFromReadableStream、createFromFetch。缓存归属按路由形状数据、独立键空间或非路由归属区分;刷新须打到真正的缓存所有者,混合 Router 与 Query 时两者都要失效。还提供 SSR 模式选择(ssr: 'data-only'、ssr: false)、loaderDeps 缓存键、useSuspenseQuery + SSR ensureQueryData 等模式。

使用方式与调试:资料列出调试入口文档与 examples/01 至 06 的复制模板,并给出默认实现顺序:服务端工作放入 createServerFn 或 createServerOnlyFn,返回 RSC,经路由 loader 消费,加最小缓存策略,在真正的缓存所有者处一次性接好失效,必要时才升级到 Composite Components 或底层 Flight API。限制:资料未提供安装命令、版本号、收费信息或平台支持范围,相关内容暂未提供。