javascript / expert
Snippet
Custom Intersection Hydration Strategy
Leveraging Vue 3.5+ custom hydration hooks, this snippet defers the hydration of a heavy component until it enters the viewport. This drastically reduces Total Blocking Time (TBT) by avoiding unnecessary JavaScript execution for off-screen elements.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
const LazyChart = defineAsyncComponent({loader: () => import('./HeavyChart.vue'),hydrate: (hydrate, { element }) => {const observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {hydrate();observer.disconnect();}});observer.observe(element);}});
vue
Breakdown
1
hydrate: (hydrate, { element }) => {
A low-level hook that gives full control over when the client-side hydration process begins.
2
observer.observe(element);
Starts monitoring the component's placeholder element for visibility changes.