search

maoberlehner / vue-lazy-hydration

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

Question - Does the component that renders when visible load for SSR? #9

Closed bovas85 closed 5 years ago

bovas85 commented 5 years ago

Would the crawlers see that component when crawling the pages?

maoberlehner commented 5 years ago

If the page is pre-rendered (Prerender SPA Plugin, Nuxt.js generate mode) or rendered on the server (Nuxt.js, Gridsome, ...) this plugin has no negative effect on crawlers. And if you do not pre-render your Vue.js application in any way, this plugin will not work for you.

bovas85 commented 5 years ago

So if you render serverside or static with nuxt it will simply render? When does it not load at all then?

maoberlehner commented 5 years ago
  1. Server renders HTML -> component is loaded on the server
  2. Server sends pre-rendered HTML to the client
  3. Browser renders static HTML -> component is not hydrated (the JavaScript of the component does not run) on the client
  4. Component becomes visible (loadWhenVisible()) or component fires some event (loadOnInteraction()) -> component is hydrated on the client

When using loadSsrOnly() the component is only hydrated if it is re-rendered on the client (e.g. route changes).

bovas85 commented 5 years ago

Thanks for the clarification @maoberlehner , great stuff!