I have a computed property that does a fairly expensive calculation based on the data in my Vuex store. The result of that calculation is then used many times on the page. The page renders in the blink of an eye on the client, but takes ages to render on the server. It turns out that the difference is that computed properties are not cached at all when doing server side rendering!
Nuxt version 1.0.0-rc11. This behaviour happens both in development and in production mode.
Basic example to reproduce the problem:
<template>
<ul>
<li v-for="value in values">{{computeForValue(value)}}</li>
</ul>
</template>
<script>
export default {
data () {
return {
values: [1, 2, 3, 4, 5, 6]
}
},
computed: {
computedFn () {
console.log('Computed function')
// Doing some expensive calculations
return Math.PI
}
},
methods: {
computeForValue (value) {
console.log('Computation for value', value)
return value * this.computedFn
}
}
}
</script>
Server side:
Client side: