Suggestions to doc update related to onServerPrefetch #7917

stoivo · 2023-03-19T10:59:55Z

stoivo
Mar 19, 2023

I was reading about pinia SSR support when I came over onServerPrefetch. I headed over to the official documentation for vue, link below. I might be wrong but I think the comment in the example misleading.

https://vuejs.org/api/composition-api-lifecycle.html#onserverprefetch

The current example is

<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>

I am thinking of the code/comment in onMounted. The onMounted hook will not but called during SSR, This hook is not called during server-side rendering. ref docs on onMounted.

https://vuejs.org/api/composition-api-lifecycle.html#onmounted

My suggestion is

onMounted(async () => {
  // onMounted is not called during server-side rendering. 
  // Values set in onServerPrefetch are not persisted to the client 
  // and need to be refetched. Make the onMounted hook async to 
  // prevent the component to flush the rendered content from the server. 
  data.value = await fetchOnClient(/* ... */)

  // And alternative solution is to use a store like pinia, 
  // then fill the store in the onServerPrefetch hook. Then 
  // include the store in request an hyrate it.
  // Look at Pinia SSR docs for more details
  // https://pinia.vuejs.org/ssr/
})

iPrytz · 2025-06-26T11:30:45Z

iPrytz
Jun 26, 2025

Agree, The current example in verry confusing

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

Suggestions to doc update related to onServerPrefetch #7917

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Vue

Suggestions to doc update related to onServerPrefetch #7917

Uh oh!

stoivo Mar 19, 2023

Replies: 1 comment

Uh oh!

iPrytz Jun 26, 2025

stoivo
Mar 19, 2023

iPrytz
Jun 26, 2025