SuperAPI AI 工具集

nextjs-data-fetching

前端与建站

查看项目

更新于 10-16 02:30

技能介绍

用途:该技能用于在 Next.js 应用中实现数据获取,涵盖静态生成(SSG)、服务端渲染(SSR)与增量静态再生(ISR),适合构建数据驱动的 Next.js 页面。

主要能力:

  1. fetch 缓存策略:默认 force-cache(类似 SSG)、cache: 'no-store'(类似 SSR)、next: { revalidate: 60 }(ISR);也可用路由级 export const revalidate 与 export const dynamic(force-dynamic、force-static、error、auto)。
  2. 静态生成:用 generateStaticParams 在构建时生成路径,支持多动态段;用 dynamicParams 控制未生成路径是按需生成还是返回 404。
  3. 重新验证:定时 revalidate;按需通过 revalidatePath、revalidateTag 配合 API 路由或 Server Action 触发,需校验 secret。
  4. 并行获取:Promise.all 并行请求,可混用不同缓存策略;Promise.allSettled 处理可选数据回退。
  5. 流式与加载:Suspense 分段流式渲染,loading.tsx 与自定义 fallback 提供加载态。
  6. 错误处理:error.tsx 错误边界、fetch 失败回退、重试逻辑。
  7. 变更数据:Server Actions('use server')配合 revalidatePath 提交表单并刷新缓存;可用 useFormState、useFormStatus 做客户端状态。
  8. 请求记忆化:同一渲染过程中相同 fetch 自动去重。

使用方式:在 app 目录的页面或组件中按上述模式编写异步组件与 fetch 调用;按需设置缓存、revalidate、tags 等选项;变更后调用 revalidatePath/revalidateTag。

适用场景:博客、商品列表与详情、仪表盘等需要混合静态与动态数据的 Next.js 应用。

限制:资料未提供安装命令、版本要求、收费信息与性能数据;示例中的 API 地址与字段为演示用途,实际需替换为真实接口。