Estrategias de hidratación diferida
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction(): hidratación diferida en Nuxt
Estrategias de hidratación diferida es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
El problema del coste de la hidratación
La SSR envía HTML listo para visualizar, pero el cliente todavía debe hidratar cada componente para volverlo interactivo. Hidratarlo todo desde el principio bloquea el hilo principal y retrasa la interactividad (TTI).
La hidratación diferida (lazy) retrasa la hidratación de los componentes hasta que realmente se necesitan.
Prefijo Auto-Lazy de Nuxt
En Nuxt, anteponer Lazy a un componente hace que se importe de forma diferida. Combinado con las estrategias de hidratación, esto retrasa tanto la descarga de JavaScript como el trabajo de hidratación.
<template>
<!-- Nuxt resolves LazyMyComponent automatically -->
<LazyMyComponent />
</template>hydrateOnVisible
hydrateOnVisible hidrata un componente solo cuando entra en el viewport al desplazarse, mediante un IntersectionObserver internamente. Es perfecto para secciones por debajo del primer pantallazo.
<template>
<!-- Nuxt syntax: hydrate when visible -->
<LazyProductReviews hydrate-on-visible />
</template>
<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->hydrateOnVisible con margen
Puede pasar opciones de IntersectionObserver para que la hidratación empiece un poco antes de que el elemento sea visible y la experiencia resulte más fluida.
<template>
<!-- start hydrating 100px before entering viewport -->
<LazyComments
:hydrate-on-visible="{ rootMargin: '100px' }"
/>
</template>hydrateOnIdle
hydrateOnIdle espera a que el navegador esté inactivo (mediante requestIdleCallback) antes de hidratar. Úselo para widgets no críticos que no deban competir con la interactividad inicial.
<template>
<!-- hydrate during idle time -->
<LazyNewsletterSignup hydrate-on-idle />
<!-- optional max timeout in ms -->
<LazyChatBubble :hydrate-on-idle="3000" />
</template>hydrateOnInteraction
hydrateOnInteraction retrasa la hidratación hasta que se produce un evento DOM especificado en el elemento (click, focus o mouseover). El componente permanece como HTML estático hasta que el usuario interactúa con él.
<template>
<!-- hydrate only on click -->
<LazyDropdownMenu hydrate-on-interaction="click" />
<!-- multiple events -->
<LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>hydrateOnMediaQuery
hydrateOnMediaQuery hidrata únicamente cuando coincide una media query; por ejemplo, puede hidratar una barra lateral exclusiva para escritorio que está oculta en móviles y evitar trabajo innecesario en pantallas pequeñas.
<template>
<!-- only hydrate on wide screens -->
<LazyDesktopSidebar
hydrate-on-media-query="(min-width: 1024px)"
/>
</template>API principal de Vue: helpers de hidratación
Fuera de Nuxt, las mismas estrategias existen como helpers de hidratación que se pasan a la opción hydrate de defineAsyncComponent. Los prefijos de Nuxt son una forma abreviada de usarlos.
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const LazyChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
hydrate: hydrateOnVisible()
})Elegir la estrategia adecuada
Adapte la estrategia a la finalidad:
- Visible — contenido por debajo del primer pantallazo (reseñas, pies de página)
- Idle — widgets en segundo plano (análisis, boletines)
- Interaction — interfaz que se muestra mediante una acción del usuario (menús, modales)
- Media query — interfaz específica del dispositivo
Aspectos que debe tener en cuenta
La hidratación diferida mejora el TTI, pero implica que el componente está no interactivo hasta que se activa el desencadenador. Con las estrategias basadas en interacción, el primer click se consume para activar la hidratación y puede percibirse una ligera demora. Reserve la hidratación inmediata para la interfaz principal de llamada a la acción.
Integración con las islas
La hidratación diferida combina bien con la arquitectura de islas: la mayor parte de la página es HTML estático renderizado en el servidor, y solo se hidratan las islas interactivas, de forma diferida y según la estrategia. El resultado es un mínimo de JavaScript en el cliente y una interactividad rápida donde importa.
<template>
<StaticArticle /> <!-- never hydrates -->
<LazyCommentBox hydrate-on-visible />
<LazyLikeButton hydrate-on-interaction="click" />
</template>Comprobación rápida
Compruebe su comprensión de las estrategias de hidratación.
Resumen
Ha aprendido sobre la hidratación diferida:
- El prefijo
Lazyde Nuxt importa componentes de forma diferida - hydrateOnVisible: por debajo del pliegue mediante IntersectionObserver
- hydrateOnIdle: para contenido no crítico, durante el tiempo de inactividad
- hydrateOnInteraction: activada por eventos (click/focus)
- Vue base expone estas opciones como helpers de
hydrateendefineAsyncComponent
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Estrategias de hidratación diferida» es gratis?
Sí — el texto completo de «Estrategias de hidratación diferida» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estrategias de hidratación diferida»?
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction(): hidratación diferida en Nuxt Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Estrategias de hidratación diferida»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Componente Vue Suspense
- Componentes asíncronos con defineAsyncComponent
- SSR en streaming con renderToWebStream
- Estrategias de hidratación diferida