VitePress 中如何正确使用 Vue 组件的异步数据获取？

Mr.正利提问于 2026-03-04 18:27:21 阅读 7

框架

我在 VitePress 里写了一个简单的 Vue 组件，想在页面加载时从 API 拿点数据，但发现 onMounted 里请求的数据在 SSR 阶段不生效，页面首次渲染是空的，只有客户端激活后才显示。这体验太差了，有没有办法让 VitePress 在服务端就渲染出真实数据？

我试过把逻辑放到 setup 里直接执行，也试过用 onBeforeMount，但都没用。是不是 VitePress 不支持服务端获取数据？还是我姿势不对？

<script setup>
import { ref, onMounted } from 'vue'

const data = ref(null)

onMounted(async () => {
  const res = await fetch('/api/data')
  data.value = await res.json()
})
</script>

<template>
  <div>{{ data?.title || 'Loading...' }}</div>
</template>

SSR框架开发工具构建工具

我来解答赞 5 收藏

反馈

1 条解答

UI洛熙 Lv1

onMounted 是客户端专用的钩子，服务端渲染时根本不会跑，当然拿不到数据。最简单的办法是用 Vue 的 onServerPrefetch，这玩意儿会在服务端渲染 HTML 前把数据请求完，保证首屏就有内容，不过你得自己在客户端加个兜底逻辑，防止 SPA 跳转的时候没数据。

<script setup>

import { ref, onServerPrefetch } from 'vue'



const data = ref(null)



const fetchData = async () => {

  const res = await fetch('https://api.your-domain.com/api/data')

  data.value = await res.json()

}



// 服务端渲染时执行

onServerPrefetch(fetchData)



// 客户端激活时如果没数据就再请求一次（SPA 跳转时需要）

if (!data.value) {

  fetchData()

}

</script>



<template>

  <div>{{ data?.title || 'Loading...' }}</div>

</template>

2026-03-04 18:39