服务端渲染(SSR)
版本要求
2.8.0+
概述
尽管 alova 的定位并不是在 nodejs 中进行请求,但为了可以结合 UI 框架的服务端渲染(Nuxt3.x / Nextjs / sveltekit),我们也对它做了适配。尽管例如Nuxt3.x
、Sveltekit
中提供了内置的请求功能,但如果你选择使用 alova 的话,你可以同时在服务端和客户端中使用 alova 管理请求,而不是服务端和客户端分别使用不同的请求方案来管理它们。
这里有一些在 SSR 中使用 alova 需要注意的地方,以及不同 UI 框架的 SSR 中的使用示例。
在服务端调用接口
SSR 中经常需要在服务端获取数据并渲染成 HTML,这种情况下我们不能使用 alova 的 use hooks(也无需使用)来获取数据,以下我们将分别对支持的 SSR 框架进行展示。
Nuxt3.x
在 Nuxt3.x 中提供了useAsyncData
在服务端初始化页面数据,同时还提供了useFetch
和$fetch
请求函数,这些可以同时在服务端和客户端使用的请求函数真的很方便。尽管如此,如果你希望在 nuxt 中使用 alova 的话,你可以使用 useAsyncData + alova.Method 组合的方式完成服务端数据获取,这与你平时使用useAsyncData
没什么区别。
<script setup>
const todoListGetter = alovaInstance.Get('/todo/list', {
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
// 在useAsyncData中返回promise
const { data, pending, refresh } = useAsyncData(async () => {
return todoListGetter.send();
});
</script>