Static GitHub Issues

[2447] Computed properties are not cached during SSR

prev: Multiple nuxt apps in 1 main modules/library/vendor
next: Does Nuxt work with Firebase Hosting ?

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: screenshot from 2017-12-23 20-36-47

Client side: screenshot from 2017-12-23 20-37-05

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2122">#c2122</a>)</em></sub></div>