onServerPrefetch()

组件实例，在服务器上呈现之前，注册一个要解析的异步函数。

类型

function onServerPrefetch(callback: () => Promise<any>): void

细节

如果回调返回一个Promise，服务器渲染器将等到Promise被解析后再渲染组件。

此钩子仅在服务器端渲染期间调用，可用于执行仅服务器数据获取。

例子

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

const data = ref(null)

onServerPrefetch(async () => {
  // component is rendered as part of the initial request
  // pre-fetch data on server as it is faster than on the client
  data.value = await fetchOnServer(/* ... */)
})

onMounted(async () => {
  if (!data.value) {
    // if data is null on mount, it means the component
    // is dynamically rendered on the client. Perform a
    // client-side fetch instead.
    data.value = await fetchOnClient(/* ... */)
  }
})
</script>