search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.18k stars 52 forks source link

Library not working #85

Closed DEADSEC-SECURITY closed 3 years ago

DEADSEC-SECURITY commented 3 years ago

So I'm trying to use this library but I don't seem to be able to make it work. I followed the docs but it loads the component like without the plugin.

MY CODE:

<Trustpilot/>
<Footerr/>
import {
  hydrateOnInteraction,
} from 'vue-lazy-hydration';
components: {
    Trustpilot: hydrateOnInteraction(() => import('@/components/trustpilot'), { event: 'focus' }),
    Footerr: hydrateOnInteraction(() => import('@/components/footer'), { event: 'focus' }),
  },

I have more code but it's +1.5K lines so ill just leave this simplified version.

I tried when visible and on idle but all of them load normally without any lazy loading from the plugin.

maoberlehner commented 3 years ago

Can't reproduce.

gibkigonzo commented 3 years ago

@maoberlehner here is repo with nuxt https://github.com/gibkigonzo/vue-lazy-hydration-85 I used same setup in vue-storefront (also uses vue-server-renderer) and there it works when using function wrappers (for example hydrateWhenVisible), but doesn't work with LazyHydrate You can check in Network tab that logo script is loaded even if it's not hydrated yet

arnaugiralt commented 3 years ago

It might be because of Vue / Nuxt are trying to preload the component: https://ssr.vuejs.org/api/#shouldpreload https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-render#resourcehints https://cli.vuejs.org/guide/html-and-static-assets.html#preload

Perhaps related to https://github.com/vuejs/vue/issues/9847 ?