Nuxt3 LazyFetch使用疑问：如何先渲染页头页脚再加载API内容？

完全可以实现先渲染页头、页脚这类静态区域，等API数据就绪后再展示内容区，核心是用异步组件+Suspense配合useAsyncData的lazy选项，替代直接在页面根逻辑里写阻塞式请求。

具体实现步骤 #

• 拆分内容区为异步组件
  把需要加载API数据的内容部分单独拆成一个组件，比如AsyncHomeContent.vue，这样Nuxt会把这个组件的代码和请求逻辑单独打包，不影响首屏静态内容的渲染。

首页组件代码示例：

<template>
  <div class="page-container">
    <header class="page-header">这里是页头内容</header>
    <!-- 使用Suspense包裹异步组件，处理加载状态 -->
    <Suspense>
      <template #default>
        <AsyncHomeContent />
      </template>
      <template #fallback>
        <!-- 加载占位符，建议用骨架屏替代文字提示 -->
        <div class="content-loading">内容加载中...</div>
      </template>
    </Suspense>
    <footer class="page-footer">这里是页脚内容</footer>
  </div>
</template>

<script setup>
// 异步引入内容组件，触发代码分割
const AsyncHomeContent = defineAsyncComponent(() => import('./components/AsyncHomeContent.vue'))
</script>

• 在异步组件中用lazy模式请求数据
  在拆分出的内容组件里，使用useAsyncData并开启lazy选项，这样请求不会阻塞组件渲染，数据就绪后自动更新视图。

AsyncHomeContent.vue代码示例：

<template>
  <div class="content-area">
    <div v-for="item in data" :key="item.id" class="content-item">
      {{ item.title }}
    </div>
  </div>
</template>

<script setup>
// 开启lazy模式，请求不会阻塞组件初始化
const { data } = await useAsyncData('home-content', () => {
  // 替换成你的实际API请求
  return $fetch('https://your-api-endpoint.com/data')
}, {
  lazy: true,
  // 如果不需要服务端渲染该数据，设为false可减少服务端压力，提升首屏速度
  server: false
})
</script>

为什么之前的LazyFetch没生效？ #

LazyFetch本质是封装了useAsyncData的lazy配置，但如果你的请求逻辑写在页面根setup函数里，页面依然会等待请求完成才会渲染整个页面。只有把请求逻辑拆分到异步组件中，配合<Suspense>使用，才能让页头、页脚这类静态内容优先渲染。

额外优化建议 #

• 用骨架屏替代简单的文字加载提示，提升用户等待体验
• 开启useAsyncData的缓存功能，比如设置cache: true，重复访问时直接复用缓存数据，避免重复请求
• 启用Nuxt的静态资源压缩、代码分割等内置优化，进一步降低首屏加载时间

内容的提问来源于stack exchange，提问作者Mike