Nuxt3中多useAsyncData请求导致页面卡顿问题求助

问题描述 #

我需要通过useAsyncData同时发起多个请求，切换页面时无卡顿，但进入该页面时出现严重卡顿。尝试过官方文档里await Promise.all结合useAsyncData的方案，问题依旧；仅发起单个请求时运行正常。

代码示例：

const {data: stamps} = await useAsyncData(
'dataStamps',
() => $fetch(urls.stamp)
);

const {data: drivers} = await useAsyncData(
'dataDrivers',
() => $fetch(urls.driver)
);

优化方案 #

1. 取消同步等待，并行发起请求 #

不要用await逐个调用useAsyncData，也无需把它包装进Promise.all后等待。useAsyncData本身是异步组合式函数，直接并行调用，让Nuxt自动处理数据加载流程，避免阻塞页面初始渲染：

// 直接并行发起请求，不使用await
const { data: stamps } = useAsyncData('dataStamps', () => $fetch(urls.stamp))
const { data: drivers } = useAsyncData('dataDrivers', () => $fetch(urls.driver))

2. 配置请求的加载策略 #

根据页面需求调整useAsyncData的参数，减少服务端或客户端的阻塞：

const { data: stamps } = useAsyncData('dataStamps', () => $fetch(urls.stamp), {
  server: false, // 仅在客户端加载数据，避免服务端串行等待请求
  prefetch: true // 开启预取，提前加载数据
})

3. 拆分请求粒度 #

如果接口返回数据量过大，请求耗时过长，建议和后端配合拆分接口：只请求当前页面渲染必需的核心数据，非必要数据（比如非首屏内容）延迟到用户交互时再加载。

4. 排查请求本身的性能问题 #

用浏览器DevTools的Network面板查看每个请求的响应时间：如果单个请求耗时久，优先优化后端接口——比如添加缓存策略、优化数据库查询逻辑，从根源减少加载时间。

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