"Nuxt 3 useFetch 与 useAsyncData SSR 数据获取与再验证实践"

Nuxt 3 useFetch 与 useAsyncData SSR 数据获取与再验证实践概述Nuxt 3 提供 `useFetch` 与 `useAsyncData` 以在 SSR 下将数据注入 payload，避免客户端水合时的重复请求，并支持在客户端导航时按需再验证数据。技术背景`$fetch` 适合事件驱动的纯客户端请求；初始数据建议使用 `useFetch`/`useAsyncData` 注入到 SSR payload。`useFetch` 更简洁、具备响应式依赖；`useAsyncData` 更灵活，适合第三方查询层封装。核心内容示例// <script setup> const { data, pending, error } = await useFetch("/api/products", { server: true }); 要点在服务端调用注入 payload，客户端无需重复请求。客户端导航时根据依赖变化触发再验证，避免过度刷新。技术参数与验证测试环境操作系统: Windows 11 / macOS 14.x / Ubuntu 22.04Node.js: 20.x LTSNuxt: 3.x浏览器: Chrome 120+ / Firefox 120+ / Safari 17+应用场景内容与列表型页面的首屏渲染与后续导航。结合自定义查询层的复杂数据获取。注意事项避免在响应式依赖频繁变化时触发过度请求。优先在 SSR 阶段注入初始数据，减少客户端水合成本。结合错误语义与用户反馈，完善再验证体验。常见问题useFetch 与 useAsyncData 何时选择？简单场景优先 useFetch；复杂封装与第三方查询层优先 useAsyncData。参考资料Nuxt 3 数据获取指南：https://nuxt.com/docs/3.x/getting-started/data-fetching实践与社区讨论：MasteringNuxt、StackOverflow 相关问题与答复