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 · 10 comments
Closed

vue-meta duplicating tags on SSR hydration #404

jnields opened this issue Jul 10, 2019 · 10 comments
Labels

Comments

@jnields
Copy link

@jnields jnields 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
Copy link
Collaborator

@pimlie pimlie 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?

Loading

@jnields
Copy link
Author

@jnields jnields commented Jul 12, 2019

Loading

@pimlie
Copy link
Collaborator

@pimlie pimlie 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 :)

Loading

@pimlie pimlie added the bug label Jul 15, 2019
@pimlie
Copy link
Collaborator

@pimlie pimlie 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

Loading

@pimlie
Copy link
Collaborator

@pimlie pimlie 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

Loading

@milewski
Copy link

@milewski milewski commented May 17, 2020

Im having this problem now with script .. for instance:

image

The pre-rendered HTML only includes the bottom ones.. but once the page loads the ones on the head gets injected

I have set ssrAppId to 1 as seen on the screenshot above.. and the HTML tag initially has a data-vue-meta-server-rendered and then it gets removed

Loading

@pimlie
Copy link
Collaborator

@pimlie pimlie commented May 17, 2020

Thanks, this will probably be fixed by #563. But Im waiting for some reviews before merging because the fix contains an assumption (see the code comment) and those are always tricky

Loading

@milewski
Copy link

@milewski milewski commented May 17, 2020

I just tried installing that PR and the issue still remains.. my setup is the following:

//My Route:

routes.push({
    path: '/',
    name: 'home',
    component: () => import('./pages/Home.vue') // <-- async
})

//My Home.vue

export default {
    metaInfo() {
        return [
            {
                vmid: md5(JSON.stringify('...')),
                type: 'application/ld+json',
                json: '...'
            },

            {
                vmid: md5(JSON.stringify('...')),
                type: 'application/ld+json',
                json: '...'
            }
        ]

    }
}

Loading

@pimlie
Copy link
Collaborator

@pimlie pimlie commented May 17, 2020

@milewski Thanks, could you please make a full reproduction on jsfiddle or codesandbox I can check out?

Loading

@milewski
Copy link

@milewski milewski commented May 17, 2020

Hi @pimlie https://github.com/milewski/vue-meta-bug , run npm run build && npm run spa

image

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

3 participants