Skip to content
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

vue-meta duplicating tags on SSR hydration #404

Closed
jnields opened this issue Jul 10, 2019 · 5 comments

Comments

@jnields
Copy link

commented Jul 10, 2019

Specifically it looks like this line:

if (this.$root.$el && this.$root.$el.hasAttribute && this.$root.$el.hasAttribute('data-server-rendered')) {

checks to see if the app is performing SSR hydration

However, by the time it gets here, Vue's already removed the data-server-rendered attribute from the root element, and so it recreates all the tags.

I haven't looked into this in-depth, but could you just set all the tags to include data-vue-meta="1" during SSR instead of data-vue-meta="ssr" and skip this check?

Using vue@2.6.10

@pimlie

This comment has been minimized.

Copy link
Collaborator

commented Jul 11, 2019

Hydration occurs when the app is mounted, the check for data-server-rendered is in a synchronous beforeMount hook. So I am not sure how the data-server-rendered attribute can be removed before the beforeMount hook runs?

I guess this issue was instigated because you experienced duplicate tags? Please create a reproduction when possible, maybe the cause is somewhere else?

@jnields

This comment has been minimized.

Copy link
Author

commented Jul 12, 2019

@pimlie

This comment has been minimized.

Copy link
Collaborator

commented Jul 15, 2019

Thanks, can confirm this issue exists.

Its caused because the component which sets metaInfo is lazy loaded due to only calling it in the render function of your root component. Because of this, Vue only knows about the A component when it starts rendering the Root component on mounting the App/Root component. And when the beforeMount hook of VueMeta then triggers indeed the $root is already mounted and the data-server-rendered attributes have been removed.

If you would change the Root component to the following then you will only have one tag.

export default Vue.extend({
  components: { A },
  name: 'Root',
  template: '<A />'
});

Will have a look at changing this behaviour and support your use-case. In the mean time please have a look if you can incorporate this workaround :)

@pimlie pimlie added the bug label Jul 15, 2019

@pimlie

This comment has been minimized.

Copy link
Collaborator

commented Jul 17, 2019

I have made the appId used on ssr configurable. So you can manually set ssrAppId: 1 as option to VueMeta. Its still not an ideal solution but at least there is a workaround.

Will update when the workaround is releasd

@pimlie

This comment has been minimized.

Copy link
Collaborator

commented Jul 24, 2019

v2.1 has been released with the ability to configure the ssrAppId

Also check: https://vue-meta.nuxtjs.org/guide/caveats.html#duplicated-tags-after-hydration-with-ssr

@pimlie pimlie closed this Jul 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.