Static GitHub Issues

[2516] Client re-renders data with SSR enabled and loses class info

prev: Document serving static files with nginx (with SSR backend)
next: Using srcset and the path shortcut feature

Hi,

it seems that when there's some oddity or whatever (couldn't google anything nor find previous issues) with asyncData() call happening on the server - and rendering. But when the page finishes loading on the client all the data disappears because the data it uses were used from getters rather than just properties. Those are not transferred to the client (presumably due to JSON serializing the data). Is there any reasonable way around it because when it comes to an array (list) of objects it becomes incredibly messy.

We cobbled together a snippet like this, but it is unusable when it comes to array/map/whatever.

 async asyncData ({ app, params }) {
    let user = await app.$api.users.fetchUser('@' + params.user)
    let color = colorize(user.login)
    return {
      _user: user.data,
      color,
      userLogin: params.user
    }
  },
  computed: {
    user () {
      return new User(this.$data._user)
    }

where the main User class is

class User extends Entity {
  get login () {
    return this._data.login || null
  }

  set login (val) {
    this._data.login = val
  }
... etc

We can see without the computed hack only the raw values without the underlying object so all the setters/getters get lost without manual recasting in the computed.

And no, SSR is there on purpose (so that googlebot/.. can actually index it). So what's the correct way to handle this?

Thanks in advance for any help. Ashley

<!--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/c2185">#c2185</a>)</em></sub></div>