SuperAPI AI 工具集

nextjs-data-fetching

前端与建站

查看项目

更新于 10-15 23:41

技能介绍

用途:为 Next.js 15.5/16 应用提供完整的数据获取方案,适用于服务端组件取数、并行与顺序请求、流式渲染、API 路由、客户端取数与变更等场景。

主要能力:服务端组件中可直接 await fetch 或访问数据库;默认缓存,可用 { cache: 'no-store' } 关闭,用 { next: { revalidate: 60 } } 做时间重新验证,用 { next: { tags: ['posts'] } } 做标签失效;路由段配置支持 dynamic='force-dynamic'、revalidate=60、fetchCache='force-no-store';可用 revalidatePath、revalidateTag 主动刷新;用 Promise.all 并行取数,依赖数据顺序取数;用 Suspense 边界实现组件级与嵌套流式加载;客户端可用 SWR 的 useSWR 或 TanStack Query 的 useQuery/useMutation;Route Handlers 支持 GET/POST/PUT/DELETE、动态参数、searchParams、cookies 与 headers;generateStaticParams 配合 dynamicParams 控制静态生成;错误处理可用 try/catch 或 error.tsx 边界。

使用方式:在服务端组件中编写 async 函数取数并渲染;按需设置缓存与重新验证选项;用 Suspense 包裹慢组件;客户端组件加 'use client' 后使用 SWR 或 TanStack Query;在 app/api 下创建 route.ts 定义接口。

限制:资料未提供安装命令、版本兼容细节、性能数据与收费信息;示例中的数据库与 API 地址为占位内容,需替换为实际实现。