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 按需组合"
}
]
}