SuperAPI AI 工具集

nextjs-data-fetching

前端与建站

查看项目

更新于 10-15 22:13

技能介绍

用途:在 Next.js App Router 中设计数据获取、缓存与重新验证方案。优先级为 P0(关键)。注意:仅覆盖 App Router 的 fetch;pages/ 目录请使用 getServerSideProps / getStaticProps,且不适用下文原生 fetch 缓存建议。

主要能力与策略:在 Server Components 中用 async/await 直接获取数据。静态策略为构建时获取,示例 fetch(url, { cache: 'force-cache' });动态策略为请求时获取,示例 fetch(url, { cache: 'no-store' }) 或使用 cookies();重新验证策略示例 fetch(url, { next: { revalidate: 60 } })。

使用模式:直接访问数据库或服务层,不要 fetch 自己的 /api 路由;在真正需要数据的位置就近获取(colocation);用 Promise.all() 并行请求以避免瀑布流;客户端实时或按用户数据使用 SWR/React Query(无 SEO)。

重新验证:revalidatePath('/path') 按路由清除缓存;revalidateTag('key') 按标签清除缓存。

应避免的写法:不要在根层级 await 慢请求,应包在 <Suspense> 中避免阻塞;不要用 useEffect 获取数据,客户端请用 SWR 或 React Query;不要在 RSC 中调用内部 API,应直接从数据库或服务层获取。

适用场景:App Router 项目中的数据获取、缓存配置与缓存刷新。限制:不适用于 pages/ 目录;其余如具体版本要求、安装命令或依赖信息暂未提供。