7. 数据获取

核心工具:useFetch、useLazyFetch、useAsyncData、$fetch。

useFetch(阻塞,利于 SEO)

Nuxt 3 实战教程:从零重构博客

这是一门关于如何使用 Nuxt 解决前后端分离 SEO 痛点的课程。

useLazyFetch(先跳转再加载)

  • 首屏必须有数据 → useFetch
  • 先跳转再加载 → useLazyFetch
  • 复杂聚合 → useAsyncData

useAsyncData(聚合请求)

{
  "user": {
    "id": 1,
    "name": "fengfeng",
    "addr": "长沙",
    "nickname": "枫枫知道"
  },
  "list": [
    {
      "id": 1,
      "title": "为什么选择 Nuxt SSR",
      "summary": "SEO 友好,首屏更快"
    },
    {
      "id": 2,
      "title": "useFetch 与 $fetch",
      "summary": "页面初始化 vs 交互请求"
    },
    {
      "id": 3,
      "title": "混合渲染入门",
      "summary": "SSR / SSG / CSR 按需组合"
    }
  ]
}

$fetch(交互触发,勿在 setup 顶层滥用)