SuperAPI AI 工具集

data-fetching-patterns

数据与分析

查看项目

更新于 10-15 21:41

技能介绍

用途:该技能用于讲解应用从 API 或数据库获取数据时可选的策略,帮助开发者在性能、用户体验与代码复杂度之间做取舍。

主要能力:

  1. 获取位置:区分服务端构建时(SSG)、服务端每请求(SSR)、客户端水合后、CDN 边缘等场景。
  2. 客户端模式:Fetch on Render(瀑布流)、Fetch Then Render(并行但全有或全无)、Render as You Fetch(并发渐进渲染,配合 Suspense 与 React 19 的 use())。
  3. 服务端模式:SSR 服务端取数、并行取数(Promise.all)、流式与 Suspense 渐进及乱序流式渲染。
  4. 缓存模式:请求去重、stale-while-revalidate、变更后缓存失效。
  5. 加载状态:骨架屏、乐观更新、占位数据。
  6. 错误处理:错误边界、重试与指数退避。
  7. 反模式:useEffect 无清理导致竞态、不处理加载/错误状态、过度获取。
  8. 决策框架与模式对比表(首屏内容、数据新鲜度、复杂度)。

使用方式:文档以 React 与 TanStack Query 示例说明各模式写法,例如 useQuery 的 staleTime、refetchOnMount、retry、retryDelay,以及 queryClient.invalidateQueries、setQueryData 等。具体安装命令与完整代码示例资料中未提供。

适用场景:需要为页面选择 SSG、ISR、SSR、流式渲染或客户端实时获取时;排查瀑布流请求、重复请求、缓存陈旧等问题时。

限制:内容偏 React 生态,其他框架需自行迁移;未提供具体性能基准、版本要求或完整项目配置。