search

maoberlehner / vue-lazy-hydration

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

Why this project works? #89

Open vhoyer opened 3 years ago

vhoyer commented 3 years ago

I seriously can't wrap my head around this code, I've read the all of the code here, does Nuxt not hydrate the component if the promise don't resolve? can you give me a quick lecture about all this? :sweat_smile:

kedrzu commented 3 years ago

https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components On SSR component is fully rendered. On client component remains async and it's rendering is deferred.

DavidGolodetsky commented 2 years ago

@kedrzu Not really. Lazy-loaded components and Lazy-hydrated components are different things. Asyc/Lazy loaded components means that the whole bundled SFC is loaded and rendered later, lazy-hydration on the other hand means that the component was rendered on SSR but it's "interactivity" applied later

kedrzu commented 2 years ago

Yes, I know how lazy hydration work. But if you read through library source code, you would see, that underneath it makes a component to be a function that returns a promise, exactly the same way you would lazy load a component.

So, this trickery makes Vue think, that the component is lazy-loaded and handles it the same way.

On SSR side, there is no lazy loading involved, so the component is fully rendered into HTML. But on the client-side, Vue gets fully rendered HTML and promise, which is resolved once the component is lazy-hydrated. So Vue itself defers the hydration until the promise is resolved, and BAM, you have lazy hydration.

DavidGolodetsky commented 2 years ago

Ah, I see, interesting. Thanx for the break down, didn't grasp it from your initial reply:)