用途:该技能用于在 Next.js 应用中实现数据获取,涵盖静态生成(SSG)、服务端渲染(SSR)与增量静态再生(ISR),适合构建数据驱动的 Next.js 页面。
主要能力:
- fetch 缓存策略:默认 force-cache(类似 SSG)、cache: 'no-store'(类似 SSR)、next: { revalidate: 60 }(ISR);也可用路由级 export const revalidate 与 export const dynamic(force-dynamic、force-static、error、auto)。
- 静态生成:用 generateStaticParams 在构建时生成路径,支持多动态段;用 dynamicParams 控制未生成路径是按需生成还是返回 404。
- 重新验证:定时 revalidate;按需通过 revalidatePath、revalidateTag 配合 API 路由或 Server Action 触发,需校验 secret。
- 并行获取:Promise.all 并行请求,可混用不同缓存策略;Promise.allSettled 处理可选数据回退。
- 流式与加载:Suspense 分段流式渲染,loading.tsx 与自定义 fallback 提供加载态。
- 错误处理:error.tsx 错误边界、fetch 失败回退、重试逻辑。
- 变更数据:Server Actions('use server')配合 revalidatePath 提交表单并刷新缓存;可用 useFormState、useFormStatus 做客户端状态。
- 请求记忆化:同一渲染过程中相同 fetch 自动去重。
使用方式:在 app 目录的页面或组件中按上述模式编写异步组件与 fetch 调用;按需设置缓存、revalidate、tags 等选项;变更后调用 revalidatePath/revalidateTag。
适用场景:博客、商品列表与详情、仪表盘等需要混合静态与动态数据的 Next.js 应用。
限制:资料未提供安装命令、版本要求、收费信息与性能数据;示例中的 API 地址与字段为演示用途,实际需替换为真实接口。