使用vite进行Vue SSR服务端渲染 |在服务器而不是客户端上加载数据

Question

我遵循了 Vue SSR 的 vite 指南，并且能够将我的 Vue 组合 API 应用程序迁移到 SSR，并且工作正常。

唯一未解决的问题是数据获取仍然在客户端完成。我正在使用 onMounted() 挂钩来获取数据，它来自 Rest api。

现在需要加载数据的组件看起来像这样：

<script setup lang="ts">
...
const loaded = ref(false);
const data = ref([]);

// Client side hook. Could also be onMounted()
onBeforeMount(async () => {
  data.value = await api.getSomething();
  loaded.value = true;
});
</script>

这些钩子的问题是，它是在客户端执行的，而不是在服务器上执行的。因此，页面并未完全渲染，但具有与没有 SSR 相同的行为。

我只能想到一种服务器端钩子。

有人知道如何在页面发送到客户端之前将数据加载到服务器上吗？

Answer 1

一些生命周期钩子，如

beforeMount

和

mounted

仅在客户端，可以故意用于此目的。而setup函数在服务器端和客户端都执行。组件应使用 suspense 以便在 SSR 中使用异步操作（例如数据获取）。所以应该是：

const data = ref();
data.value = await api.getSomething();

或者如果

data

除了初始获取之外没有反应：

const data = await api.getSomething();