Suggestions to doc update related to onServerPrefetch

[stoivo]

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]

Agree, The current example in verry confusing