Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork50
Lazy Hydration of Server-Side Rendered Vue.js Components
License
maoberlehner/vue-lazy-hydration
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Lazy Hydration of Server-Side Rendered Vue.js Components
vue-lazy-hydration is a renderless Vue.js component toimprove Estimated Input Latency and Time to Interactive of server-side rendered Vue.js applications. This can be achievedby using lazy hydration to delay the hydration of pre-rendered HTML.
npm install vue-lazy-hydration
importLazyHydratefrom'vue-lazy-hydration';// ...exportdefault{// ...components:{ LazyHydrate,// ...},// ...};
In the example below you can see the four hydration modes in action.
<template><divclass="ArticlePage"><LazyHydratewhen-idle><ImageSlider/></LazyHydrate><LazyHydratenever><ArticleContent:content="article.content"/></LazyHydrate><LazyHydratewhen-visible><AdSlider/></LazyHydrate><!-- `on-interaction` listens for a `focus` event by default ... --><LazyHydrateon-interaction><CommentForm:article-id="article.id"/></LazyHydrate><!-- ... but you can listen for any event you want ... --><LazyHydrateon-interaction="click"><CommentForm:article-id="article.id"/></LazyHydrate><!-- ... or even multiple events. --><LazyHydrate:on-interaction="['click', 'touchstart']"><CommentForm:article-id="article.id"/></LazyHydrate></div></template><script>importLazyHydratefrom'vue-lazy-hydration';exportdefault{components:{ LazyHydrate,AdSlider:()=>import('./AdSlider.vue'),ArticleContent:()=>import('./ArticleContent.vue'),CommentForm:()=>import('./CommentForm.vue'),ImageSlider:()=>import('./ImageSlider.vue'),},// ...};</script>
- Because it is at the very top of the page, the
ImageSlidershould be hydrated eventually, but we can wait until the browser is idle. - The
ArticleContentcomponent is never hydrated on the client, which also means it will never be interactive (static content only). - Next we can see the
AdSliderbeneath the article content, this component will most likely not be visible initially so we can delay hydration until the point it becomes visible. - At the very bottom of the page we want to render a
CommentFormbut 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.
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.
<template><divclass="MyComponent"><button@click="editModeActive = true"> Activate edit mode</button><LazyHydratenever:trigger-hydration="editModeActive"><UserSettingsForm/></LazyHydrate></div></template><script>importLazyHydratefrom'vue-lazy-hydration';exportdefault{components:{ LazyHydrate,UserSettingsForm:()=>import('./UserSettingsForm.vue'),},data(){return{editModeActive:false,};},// ...};</script>
Because of how this package works, it is not possible to nest multiple root nodes inside of a single<LazyHydrate>. But you can wrap multiple components with a<div>.
<template><divclass="MyComponent"><LazyHydratenever><div><ArticleHeader/><ArticleContent/><ArticleMetaInfo/><ArticleFooter/></div></LazyHydrate></div></template>
Internally theIntersection Observer API is used to determine if a component is visible or not. You can provide Intersection Observer options to thewhen-visible property to configure the Intersection Observer.
<template><divclass="MyComponent"><LazyHydrate:when-visible="{ rootMargin: '100px' }"><ArticleFooter/></LazyHydrate></div></template>
For a list of possible options pleasetake a look at the Intersection Observer API documentation on MDN.
Additionally to the<LazyHydrate> wrapper component you can also use Import Wrappers to lazy load and hydrate certain components.
<template><divclass="ArticlePage"><ImageSlider/><ArticleContent:content="article.content"/><AdSlider/><CommentForm:article-id="article.id"/></div></template><script>import{hydrateOnInteraction,hydrateNever,hydrateWhenIdle,hydrateWhenVisible,}from'vue-lazy-hydration';exportdefault{components:{AdSlider:hydrateWhenVisible(()=>import('./AdSlider.vue'),// Optional.{observerOptions:{rootMargin:'100px'}},),ArticleContent:hydrateNever(()=>import('./ArticleContent.vue')),CommentForm:hydrateOnInteraction(()=>import('./CommentForm.vue'),// `focus` is the default event.{event:'focus'},),ImageSlider:hydrateWhenIdle(()=>import('./ImageSlider.vue')),},// ...};</script>
This plugin will not work as advertised if you're not using it in combination with SSR. Although it should work with every pre-rendering approach (likePrerender SPA Plugin,Gridsome, ...) I've only tested it withNuxt.js so far.
Breaking changes:
ssr-onlywas renamed tonever(as in "Hydrate this? Never!").
-<LazyHydrate ssr-only>+<LazyHydrate never> <ArticleContent/> </LazyHydrate>
- Specyfing
ignored-propson Import Wrappers is not necessary anymore.
components: {- ArticleContent: hydrateNever(() => import('./ArticleContent.vue'), { ignoredProps: ['content'] }),+ ArticleContent: hydrateNever(() => import('./ArticleContent.vue')), }- Partial Hydration Concepts: Lazy and Active
- abomination: a Concept for a Static HTML / Dynamic JavaScript Hybrid Application
- How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications
The code of the v1 version of this package was based on asimilar package created byRahul Kadyan.
Because the core functionality ofvue-lazy-hydration heavily relies on browser APIs likeIntersectionObserver andrequestIdleCallback(), it is tough to write meaningful unit tests without having to write numerous mocks. Because of that, we mostly use integration tests and some performance benchmarks to test the functionality of this package.
Execute the following commands to run the integration tests:
npm run test:integration:buildnpm run test:integration
Execute the following commands to run the performance benchmark:
npm run test:perf:buildnpm run test:perf
Markus Oberlehner
Website:https://markus.oberlehner.net
Twitter:https://twitter.com/MaOberlehner
PayPal.me:https://paypal.me/maoberlehner
Patreon:https://www.patreon.com/maoberlehner
MIT
About
Lazy Hydration of Server-Side Rendered Vue.js Components
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.