[Feature Request] Support SSR Mode

[yoelpc4]

Hi @robsontenorio thanks for your work on this great package.

I just building a fresh project with nuxt.js framework along with your package.

Currently I can find a model from my api on nuxt asyncData method, but when it comes to save method vue api query can't save my model to my api. This issue can be solved temporarily by placed the request on created hook instead of asyncData method, this means not using SSR feature at all as stated on #57 (comment).

After reading nuxt lifecycle docs I try to debugging the model on created hook, turns out the model from asyncData SSR is an instance of Model class but the model after client side hydration is a plain object, so that when I call save method on that model it can't worked as expected.

In the future do you have any plan to support SSR mode especially on nuxt.js framework?

[JoaoPedroAS51]

Hi @yoelpc4! Adding support for nuxt would be awesome! I did some research, but couldn't find a way to make it work. Do you have any ideas?

I added an example of a temporary workaround in nuxt usage example. This way you can use SSR at least.

Basically, use computed property to reassign the model.

[yoelpc4]

@JoaoPedroAS51 This means for every models instance on data of component, we must have a single copy of models instance in computed of vue component.

I wonder which one of these overcomes are more efficient to CPU & RAM usage, my approach to putting fetch data function call on created hook (this results fetch data function call twice on server & client side on SSR mode) vs your approach to prepare two model instance on data & computed (this results fetch data function call once on SSR mode)?

[JoaoPedroAS51]

Hey @yoelpc4! Sorry for taking so long to respond.

I wonder which one of these overcomes are more efficient to CPU & RAM usage

I really don't know. I never tested this.

But it's also possible to use beforeMount hook to fix this issue.
Both, computed property and before mount hook were suggested by a member of nuxt team. (nuxt/nuxt#9294 (comment))

Using beforeMount:

async asyncData() {
  const post = Post.find(1)

  return { post }
},

beforeMount() {
  if (!(this.post instanceof Post)) {
    this.post = new Post(this.post)
  }
}

Using computed property:

async asyncData() {
  const _post = Post.find(1)

  return { _post }
},

computed: {
  post() {
    return this._post instanceof Post ? this._post : new Post(this._post)
  }
}

[yoelpc4]

Yeah whenever I try to get models from backend via fetch method I got warning on console

WARN Cannot stringify arbitrary non-POJOs Model

It looks like nuxt serialization process wouldn't stringify object with function as you mention on the nuxt repo above, so that beforeMount or computed is the current working solution.

There's another non-POJO serialization issue on vuex-orm package but it's already closed vuex-orm/vuex-orm#255, maybe this could be considered to be a solution on the future @robsontenorio.

Anyway thanks for your help @JoaoPedroAS51