I've used Vue as a client-side library for years but I unfortunately never dove into server-side rendering, or understand it much, for that matter. I was watching a few tutorials on it where it gave an example of normal client-side fetching with the mount() hook.
<template>
<div v-for="item in items">
<div> {{ item.name }} </div>
</div>
</template>
data() {
return {
items: []
}
}
mount() {
fetch('http://www.myendpoint.com')
.then(response => {
this.items = response;
}
}
vs using Nuxt's asyncData option instead:
<template>
<div v-for="item in items">
<div> {{ item.name }} </div>
</div>
</template>
asyncData() {
fetch('http://www.myendpoint.com')
.then(response => {
this.items = response;
}
}
does this just mean that async data would run long before mountwould ever run since it's run before the component is even loaded so the data will be ready? What happens if that fetch call takes a while to load then...doesn't the same side effect happen? Rather than a component without data ready usingmount()` if the fetch takes long, you'd just have nothing at all loaded until the fetch completes if using SSR?
