Why this project works?

[vhoyer]

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? 😅

[kedrzu]

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]

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

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]

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