vue-lazy-hydration


> Lazy hydration of server-side rendered Vue.js components.


Motivation

vue-lazy-hydration is a renderless Vue.js component to improve Estimated Input Latency and Time to Interactive of server-side rendered Vue.js applications. This can be achieved by using lazy hydration to delay the hydration of pre-rendered HTML.

Install

``bash
npm install vue-lazy-hydration
`

`js
import LazyHydrate from 'vue-lazy-hydration';
// ...

export default {
// ...
components: {
LazyHydrate,
// ...
},
// ...
};
`

Basic example

In the example below you can see the four hydration modes in action.

`html



`

1. Because it is at the very top of the page, the ImageSlider should be hydrated eventually, but we can wait until the browser is idle.
2. The ArticleContent component is never hydrated on the client, which also means it will never be interactive (static content only).
3. Next we can see the AdSlider beneath the article content, this component will most likely not be visible initially so we can delay hydration until the point it becomes visible.
4. At the very bottom of the page we want to render a CommentForm but because most people only read the article and don't leave a comment, we can save resources by only hydrating the component whenever it actually receives focus.

Advanced

$3

Sometimes you might want to prevent a component from loading initially but you want to activate it on demand if a certain action is triggered. You can do this by manually triggering the component to hydrate like you can see in the following example.

`html



`

$3

Because of how this package works, it is not possible to nest multiple root nodes inside of a single . But you can wrap multiple components with a