New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating meta related data just after hydration is ignored #224

Open
ktsn opened this Issue Jun 7, 2018 · 3 comments

Comments

Projects
None yet
4 participants
@ktsn

ktsn commented Jun 7, 2018

Looks like vue-meta ignores the update for data that will affect meta info when it is just after SSR hydration.

Example:

export default {
  metaInfo () {
    return {
      meta: [
        {
          vmid: 'description',
          name: 'description',
          content: this.mounted
            ? 'updated'
            : 'not updated yet'
        }
      ]
    }
  },

  data () {
    return {
      mounted: false
    }
  },

  mounted () {
    this.mounted = true
  }
}

In the above example, it is expected that the meta[name="description"] has content updated but it actually be not updated yet.

The complete reproduction is here (using Nuxt): https://github.com/ktsn/vue-meta-repro

I briefly looked into the code and seems that the issue is caused by batchUpdate - since It delays the actual update to DOM by requestAnimationFrame, it accidentaly treats normal data update as SSR hydration phase.

Workaround is wrapping the data update with requestAnimationFrame so that it will be processed after hydration phase. But it seems a little hacky.

mounted () {
  requestAnimationFrame(() => {
    this.mounted = true
  })
}

I guess this is a bit hard problem to solve 😞 . Maybe we should state about this behavior in the docs?

@Ovyerus

This comment has been minimized.

Ovyerus commented Jun 18, 2018

I'm experiencing this as well (I think, could be something else) when trying to set htmlAttrs with a value from Vuex that gets hydrated on the client side.

@Atinux Atinux self-assigned this Jul 5, 2018

@Atinux

This comment has been minimized.

Collaborator

Atinux commented Jul 5, 2018

Well actually I am not the author of this doc but if you could help me on it @ktsn it would be great.

Please mention me so I can receive an email when you answer.

@Lord-Y

This comment has been minimized.

Lord-Y commented Aug 7, 2018

Same thing for me and the title part is also weird. In the browser I can see the right title when the webpage is fully loaded but when you check the page html code, you'll see the old title. Here's the code:

metaInfo() {
  return {
    title: this.meta.title,
    meta: [
      { vmid: "description", name: "description", content: this.meta.description }
    ]
  }
},
data() {
  return {
    meta: {
      title: "Page title",
      description: "Yolooo"
    }
  }
},
mounted() {
  this.meta.title = "New page title"
}

In my template file,I'm using

{{{ meta.inject().title.text() }}} {{{ meta.inject().meta.text() }}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment