Nuxt.js: Vue 'watch' has different performance in SSR and SPA

[fxxjdedd]

When enter a page for the first time, SSR and SPA perform different.

I know, SSR will return a static HTML for the first time, then Hydrate(active) the page.

But still I can't figure out

For SSR:

export default {
  asyncData() {
    return {
      paramA: {}
    }
  },
  data() {
    return {
      paramB: {}
    }
  },
  watch: {
    paramA: function(newValue) {
       console.log('paramA', newValue) // won't print unless 'immediate: true' 
    },
    paramB: function(newValue) {
       // Here is what i'm confusing
       // will print whether 'immediate: true' or not, **Why?**
       console.log('paramB', newValue) 
    }
  }
}

For Pure Vue SPA:

export default {
  data() {
    return {
      paramC: {}
    }
  },
  watch: {
    paramC: function(newValue) {
       console.log('paramC', newValue) // won't print unless 'immediate: true' 
    }
  }
}

_{This question is available on Nuxt.js community (#c2673)}

[galvez]

@fxxjdedd I believe that's because when paramB is merged into the object in SSR, the watcher is already set up.

[qm3ster]

I think because in SSR there's a state object sent from the server, which is then applied (causing the watcher to fire)

SPA:

1. data()
2. render on client
3. done

SSR:

1. asyncData() on server
2. data() on server
3. render on server
4. state payload serialized
5. skipped asyncData on client (?)
6. data() on client
7. state payload applied <- THIS IS YOUR PRINT
8. render on client
9. hydrating the html
10. done

[hitao123]

so we can not watch data in ssr?

[qm3ster]

@hitao123 Of course you can. With all normal Vue usage there won't be any difference.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.