Deferred Hydration Strategies
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — Nuxt lazy hydration.
The Hydration Cost Problem
SSR sends ready-to-view HTML, but the client still has to hydrate every component to make it interactive. Hydrating everything up front blocks the main thread and delays interactivity (TTI).
Deferred (lazy) hydration delays hydration of components until they are actually needed.
Nuxt Auto-Lazy Prefix
In Nuxt, prefixing a component with Lazy makes it lazily imported. Combined with hydration strategies, this defers both the JS download and the hydration work.
<template>
<!-- Nuxt resolves LazyMyComponent automatically -->
<LazyMyComponent />
</template>All lessons in this course
- Vue Suspense Component
- Async Components with defineAsyncComponent
- Streaming SSR with renderToWebStream
- Deferred Hydration Strategies