如何在Nuxt 3中全局阻止客户端获取页面初始数据？

1. 全局配置强制SSR与禁用过渡 #

通过Nuxt核心配置全局锁定SSR模式，同时关闭页面过渡动画，从根源阻止客户端初始数据请求：

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    // 禁用所有页面/布局过渡动画
    pageTransition: false,
    layoutTransition: false
  },
  nitro: {
    routeRules: {
      // 全局路由强制SSR渲染，禁止客户端发起初始数据请求
      '/**': { ssr: true }
    }
  }
})

说明：routeRules的ssr: true会让所有页面默认从Nuxt服务器获取渲染后的HTML与初始数据，完全跳过客户端初始数据请求流程。

2. 全局路由拦截替代a标签（修复回退错误） #

直接使用a标签会破坏Nuxt路由状态导致回退报错，可通过全局插件实现类a标签的SSR导航逻辑，同时兼容回退操作：

// plugins/force-ssr-navigation.ts
export default defineNuxtPlugin((nuxtApp) => {
  // 阻止客户端页面初始化阶段的数据预取
  nuxtApp.hook('page:start', () => {
    if (process.client) {
      // 禁用客户端侧的初始数据请求
      nuxtApp._instance?.$fetch?.defaults = { ...nuxtApp._instance.$fetch.defaults, baseURL: '' }
    }
  })

  // 拦截客户端导航，强制SSR跳转（非回退场景）
  nuxtApp.hook('router:beforeRouteUpdate', (to, from) => {
    // 仅对非回退的新路由跳转执行硬导航
    if (!to.meta.isBackNavigation) {
      window.location.href = to.fullPath
      return false // 终止Nuxt客户端路由逻辑
    }
    // 回退场景保留原生路由逻辑，避免报错
    delete to.meta.isBackNavigation
  })

  // 提供全局自定义回退方法，标记回退状态
  nuxtApp.provide('safeGoBack', () => {
    const route = useRoute()
    route.meta.isBackNavigation = true
    window.history.back()
  })
})

使用时，将原来的window.history.back()或useRouter().back()替换为useNuxtApp().$safeGoBack()即可避免报错。

3. 页面级兜底控制（可选） #

若需针对特定页面强化控制，可在页面的useAsyncData中强制仅在服务器端请求数据：

// pages/xxx.vue
const { data } = useAsyncData('page-data', async () => {
  // 客户端直接返回空，不发起请求
  if (process.client) return null
  // 仅服务器端执行数据请求
  return await $fetch('/api/your-data-api')
})

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