Nuxt3中useFetch依赖查询异常：硬加载时精选帖子未被排除

硬重载时精选帖子未被排除的核心原因是SSR阶段精选帖子与剩余帖子的请求并行执行：剩余帖子的useFetch在获取到精选帖子的cursor之前就发起了请求，导致未带上用于排除的cursor参数；而热重载是客户端单独执行，此时精选帖子数据已存在，cursor能正常传递。

方案1：用 await 确保精选帖子优先加载（SSR友好） #

在服务器端渲染时，强制等待精选帖子请求完成后再发起剩余帖子请求，确保cursor参数有效：

<script setup>
// 先获取精选帖子，await 阻塞后续请求直到数据返回
const { data: featuredPosts } = await useAsyncData('featured-posts', () => {
  return $fetch('/api/featured-posts')
})

const category = ref('all')
// 剩余帖子请求直接使用已获取的 cursor
const { data: remainingPosts } = useFetch('/api/remaining-posts', {
  query: {
    cursor: featuredPosts.value?.[featuredPosts.value.length - 1]?.cursor,
    category: category.value
  }
})
</script>

方案2：懒加载剩余帖子 + 监听cursor变化（非阻塞SSR） #

若不想阻塞SSR，可让剩余帖子请求懒加载，通过watch监听精选帖子的cursor变化，当cursor可用时再触发请求：

<script setup>
const category = ref('all')
const { data: featuredPosts } = useAsyncData('featured-posts', () => {
  return $fetch('/api/featured-posts')
})

// 开启 lazy: true 让请求不自动触发
const { data: remainingPosts, refresh } = useFetch('/api/remaining-posts', {
  lazy: true,
  get query() {
    return {
      cursor: featuredPosts.value?.[featuredPosts.value.length - 1]?.cursor,
      category: category.value
    }
  }
})

// 监听精选帖子和分类变化，自动刷新剩余帖子列表
watch([featuredPosts, category], () => {
  if (featuredPosts.value?.length) {
    refresh()
  }
}, { immediate: true })
</script>

额外检查点 #

• 确认后端API正确处理cursor参数，确保返回该cursor之后的帖子，完全排除精选帖子内容；
• 硬重载后查看网络请求，确认剩余帖子的请求是否带上了正确的cursor参数，以此验证问题是否解决；
• 可给精选帖子的useAsyncData添加缓存策略，避免重复请求。

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