如何在Nuxt3中隐藏页面跳转时Server API的浏览器网络请求？

要实现页面跳转（如从/hello到/world）时，不在浏览器网络请求列表中显示向server/api发起的请求，核心思路是避免在客户端发起API请求，转而通过服务端预取数据并传递给客户端，以下是具体可行的方案：

方案1：确保useFetch的服务端请求配置生效 #

你的代码中已经设置了server: true，但需要确保Nuxt的SSR模式开启，且客户端导航时复用服务端生成的payload数据：

1. 确认nuxt.config.ts中SSR模式开启（默认已开启，可显式声明）：

export default defineNuxtConfig({
  ssr: true,
  routeRules: {
    '/api/**': {
      cache: { maxAge: 60 },
      swr: true
    }
  }
})

2. 保持页面中useFetch的配置，确保initialCache为true（默认值，可显式设置以明确）：

<script setup>
const { data: advantages, error } = await useFetch('/api/advantages', {
  server: true,
  initialCache: true // 确保客户端复用服务端payload
})
</script>

在SSR模式下，客户端通过NuxtLink跳转时，Nuxt会在服务端渲染目标页面并将预取的API数据作为payload传递给客户端，浏览器不会发起单独的XHR/Fetch请求到server/api。

方案2：全局预取并共享API数据 #

通过Nuxt插件在服务端一次性预取数据，存入全局状态，所有页面直接复用该状态，彻底消除客户端请求：

1. 创建插件文件plugins/advantages.ts：

export default defineNuxtPlugin(async () => {
  // 创建全局状态存储数据
  const advantages = useState('advantages', () => null)

  // 仅在服务端请求数据，避免客户端重复请求
  if (process.server && !advantages.value) {
    advantages.value = await $fetch('/api/advantages')
  }

  // 提供全局方法供页面调用
  return {
    provide: {
      getAdvantages: () => advantages.value
    }
  }
})

2. 在页面中使用全局状态：

<template>
  <div>
    <h2>Page Hello</h2>
    <NuxtLink to="/world">Go to World!</NuxtLink>
    <div>
      <pre>{{ advantages }}</pre>
    </div>
  </div>
</template>

<script setup>
const { $getAdvantages } = useNuxtApp()
const advantages = $getAdvantages()
</script>

此方案中，API数据仅在服务端首次请求一次，后续所有页面跳转直接从全局状态读取数据，不会产生任何客户端API请求。

方案3：静态生成站点（适用于内容不频繁更新的场景） #

如果你的站点内容不需要实时更新，可以使用Nuxt的静态生成功能，预先生成所有页面的静态HTML文件：

1. 执行静态生成命令：

npx nuxi generate

生成的静态文件中已包含所有API数据，页面跳转时完全加载静态资源，不会发起任何API请求。

关键注意事项 #

• 若你的Nuxt配置中设置了ssr: false（SPA模式），server: true配置将无效，必须开启SSR才能实现服务端预取数据。
• 确保routeRules中的缓存配置正常工作，避免服务端重复向外部API发起请求。

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