用途:该技能用于讲解应用从 API 或数据库获取数据时可选的策略,帮助开发者在性能、用户体验与代码复杂度之间做取舍。
主要能力:
- 获取位置:区分服务端构建时(SSG)、服务端每请求(SSR)、客户端水合后、CDN 边缘等场景。
- 客户端模式:Fetch on Render(瀑布流)、Fetch Then Render(并行但全有或全无)、Render as You Fetch(并发渐进渲染,配合 Suspense 与 React 19 的 use())。
- 服务端模式:SSR 服务端取数、并行取数(Promise.all)、流式与 Suspense 渐进及乱序流式渲染。
- 缓存模式:请求去重、stale-while-revalidate、变更后缓存失效。
- 加载状态:骨架屏、乐观更新、占位数据。
- 错误处理:错误边界、重试与指数退避。
- 反模式:useEffect 无清理导致竞态、不处理加载/错误状态、过度获取。
- 决策框架与模式对比表(首屏内容、数据新鲜度、复杂度)。
使用方式:文档以 React 与 TanStack Query 示例说明各模式写法,例如 useQuery 的 staleTime、refetchOnMount、retry、retryDelay,以及 queryClient.invalidateQueries、setQueryData 等。具体安装命令与完整代码示例资料中未提供。
适用场景:需要为页面选择 SSG、ISR、SSR、流式渲染或客户端实时获取时;排查瀑布流请求、重复请求、缓存陈旧等问题时。
限制:内容偏 React 生态,其他框架需自行迁移;未提供具体性能基准、版本要求或完整项目配置。