Nuxt 3 useLazyFetch() 阻塞页面导航问题求助

问题原因 #

你遇到的情况是因为useLazyFetch在SSR模式下默认会在服务端发起请求，服务端会等待该请求完成后才生成页面返回给浏览器，导致页面导航被阻塞。虽然useLazyFetch的lazy选项默认开启（允许组件在请求完成前渲染），但server选项默认也为true，这意味着请求会在服务端执行，而SSR流程中服务端必须等待所有服务端请求完成才能响应页面，因此出现了阻塞现象。

解决方案 #

修改useLazyFetch的配置，将server设置为false，让请求仅在客户端执行：

<template>
    <div v-if="!pending">
        {{ data }}
    </div>
    <div v-else>
        Loading
    </div>
</template>

<script lang="ts" setup>
const { data, pending } = useLazyFetch('/api/test', {
  server: false // 关键配置：仅在客户端发起请求
})
</script>

这样设置后，服务端渲染时不会执行该请求，页面会立即加载并显示"Loading"，客户端后续异步请求数据，完全不会阻塞页面导航。

补充说明 #

如果需要保留服务端渲染数据的同时避免阻塞，可以考虑：

• 对该API请求启用缓存，减少服务端等待时间
• 将非关键数据的请求放在客户端执行，优先渲染页面核心内容

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