vue | hydration vue
LazyHydrationofServer-SideRenderedVue.jsComponentsvue-lazy-hydrationisarenderlessVue.jscomponenttoimproveEstimatedInputLatencyandTimetoInteractiveofserver-siderenderedVue.jsapplications.Thiscanbeachievedbyusinglazyhydrationtodelaythehydrationofpre-renderedHTML.Installnpminstallvue-lazy-hydrationimportLazyHydratefromvue-lazy-hydration;//...exportdefault{//...components:{LazyHydrate,//...},//...};BasicexampleIntheexamplebelowyoucanseethefourhydrationmodesinaction.
Lazy Hydration of Server-Side Rendered Vue.js Components
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 npm install vue-lazy-hydration import LazyHydrate from vue-lazy-hydration; // ... export default { // ... components: { LazyHydrate, // ... }, // ... }; Basic exampleIn the example below you can see the four hydration modes in action.
<template> <div class="ArticlePage"> <LazyHydrate when-idle> <ImageSlider/> </LazyHydrate> <LazyHydrate never> <ArticleContent :content="article.content"/> </LazyHydrate> <LazyHydrate when-visible> <AdSlider/> </LazyHydrate> ...