Nuxt3 SSR环境下无法使用自带Axios的Vue3 UI组件

问题根源 #

组件在SSR模式下报错，是因为服务端渲染阶段Node环境中直接执行顶层await的Axios请求，未适配Nuxt的异步数据处理机制，导致服务端无法正确序列化数据或处理异步逻辑。

解决方案 #

方案1：用Nuxt3的useAsyncData替代顶层Axios请求 #

Nuxt3提供的useAsyncData是专门为SSR设计的组合式API，能自动在服务端获取数据并序列化到页面，客户端直接复用数据，完美适配SSR场景。修改组件代码如下：

<script setup lang="ts">
import axios from 'axios'
import { useAsyncData } from '#app'

// 第一个参数为唯一key，用于数据缓存
const { data: data2 } = await useAsyncData('pokemon-badabouin', () => {
  return axios.get("https://api-pokemon-fr.vercel.app/api/v1/pokemon/badabouin")
    .then(res => res.data)
})
</script>

<template>
  <div class="ui-first-card">
      <p :style="{ color: 'cyan' }">pokemon</p>
    <p :style="{ color: 'cyan' }">{{ data2.sprites.regular}}</p>
    <img :src="data2.sprites.regular" alt="pokemonImg">
  </div>
</template>

方案2：仅在客户端发起请求（保持组件通用性） #

如果希望组件不依赖Nuxt的API，保持跨框架通用性，可以通过Vue生命周期钩子，仅在客户端挂载后发起请求，同时处理服务端的占位状态：

<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'

const data2 = ref(null)

// onMounted仅在客户端执行
onMounted(async () => {
  const res = await axios.get("https://api-pokemon-fr.vercel.app/api/v1/pokemon/badabouin")
  data2.value = res.data
})
</script>

<template>
  <div class="ui-first-card" v-if="data2">
      <p :style="{ color: 'cyan' }">pokemon</p>
    <p :style="{ color: 'cyan' }">{{ data2.sprites.regular}}</p>
    <img :src="data2.sprites.regular" alt="pokemonImg">
  </div>
  <!-- 服务端渲染时的占位内容 -->
  <div class="ui-first-card" v-else>
    <p>Loading...</p>
  </div>
</template>

方案3：复用Nuxt的Axios实例（统一请求配置） #

如果你的Nuxt项目已经配置了Axios实例（比如通过@nuxtjs/axios模块），可以让组件注入并复用这个实例，同时结合useAsyncData处理SSR：

<script setup lang="ts">
import { inject } from 'vue'
import { useAsyncData } from '#app'

// 注入Nuxt提供的Axios实例
const $axios = inject('$axios')

const { data: data2 } = await useAsyncData('pokemon-badabouin', () => {
  return $axios.get("https://api-pokemon-fr.vercel.app/api/v1/pokemon/badabouin")
    .then(res => res.data)
})
</script>

<template>
  <div class="ui-first-card">
      <p :style="{ color: 'cyan' }">pokemon</p>
    <p :style="{ color: 'cyan' }">{{ data2.sprites.regular}}</p>
    <img :src="data2.sprites.regular" alt="pokemonImg">
  </div>
</template>

方案选择 #

• 需要SSR预渲染数据、优化SEO：优先选方案1或方案3
• 要求组件完全独立、跨框架可用：选方案2

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