0Pricing
Vue Academy · Leçon

Stratégies d’hydratation différée

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hydratation différée de Nuxt

Stratégies d’hydratation différée est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Le problème du coût de l’hydratation

Le SSR envoie du HTML prêt à afficher, mais le client doit encore hydrater chaque composant pour le rendre interactif. Hydrater tous les composants dès le départ bloque le thread principal et retarde l’interactivité (TTI).

L’hydratation différée (paresseuse) retarde l’hydratation des composants jusqu’à ce qu’ils soient réellement nécessaires.

Préfixe Auto-Lazy de Nuxt

Dans Nuxt, préfixer un composant avec Lazy permet de l’importer à la demande. Associé aux stratégies d’hydratation, cela diffère à la fois le téléchargement du JS et le travail d’hydratation.

<template>
  <!-- Nuxt resolves LazyMyComponent automatically -->
  <LazyMyComponent />
</template>

hydrateOnVisible

hydrateOnVisible hydrate un composant uniquement lorsqu’il entre dans la fenêtre d’affichage, en utilisant en interne un IntersectionObserver. Idéal pour les sections sous la ligne de flottaison.

<template>
  <!-- Nuxt syntax: hydrate when visible -->
  <LazyProductReviews hydrate-on-visible />
</template>

<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->

hydrateOnVisible avec marge

Vous pouvez transmettre des options à IntersectionObserver afin que l’hydratation commence légèrement avant que l’élément soit visible, pour rendre l’expérience plus fluide.

<template>
  <!-- start hydrating 100px before entering viewport -->
  <LazyComments
    :hydrate-on-visible="{ rootMargin: '100px' }"
  />
</template>

hydrateOnIdle

hydrateOnIdle attend que le navigateur soit inactif (via requestIdleCallback) avant d’hydrater le composant. Utilisez-le pour les composants non critiques qui ne doivent pas entrer en concurrence avec l’interactivité initiale.

<template>
  <!-- hydrate during idle time -->
  <LazyNewsletterSignup hydrate-on-idle />

  <!-- optional max timeout in ms -->
  <LazyChatBubble :hydrate-on-idle="3000" />
</template>

hydrateOnInteraction

hydrateOnInteraction diffère l’hydratation jusqu’à ce qu’un événement DOM donné se produise sur l’élément (clic, focus, survol). Le composant reste du HTML statique jusqu’à l’intervention de l’utilisateur.

<template>
  <!-- hydrate only on click -->
  <LazyDropdownMenu hydrate-on-interaction="click" />

  <!-- multiple events -->
  <LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>

hydrateOnMediaQuery

hydrateOnMediaQuery hydrate le composant uniquement lorsqu’une requête média correspond, par exemple pour hydrater une barre latérale réservée aux ordinateurs de bureau et masquée sur mobile, évitant ainsi du travail inutile sur les petits écrans.

<template>
  <!-- only hydrate on wide screens -->
  <LazyDesktopSidebar
    hydrate-on-media-query="(min-width: 1024px)"
  />
</template>

API centrale de Vue : assistants d’hydratation

En dehors de Nuxt, les mêmes stratégies existent sous forme d’assistants d’hydratation transmis à l’option hydrate de defineAsyncComponent. Les préfixes de Nuxt ne sont qu’une syntaxe abrégée pour ces assistants.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const LazyChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  hydrate: hydrateOnVisible()
})

Choisir la bonne stratégie

Adaptez la stratégie à l’objectif :

  • Visible — contenu sous la ligne de flottaison (avis, pieds de page)
  • Inactivité — composants d’arrière-plan (analyses, inscription à une lettre d’information)
  • Interaction — interface révélée par une action de l’utilisateur (menus, fenêtres modales)
  • Requête média — interface propre à l’appareil

Points de vigilance et compromis

L’hydratation différée améliore le TTI, mais le composant reste non interactif jusqu’au déclenchement prévu. Pour les stratégies fondées sur une interaction, le tout premier clic est utilisé pour déclencher l’hydratation et peut sembler légèrement retardé. Réservez l’hydratation immédiate à l’interface principale d’appel à l’action.

Combinaison avec les îlots

L’hydratation différée s’associe à l’architecture en îlots : la majeure partie de la page est du HTML statique rendu côté serveur, et seuls les îlots interactifs sont hydratés — de manière différée, selon la stratégie. Résultat : un minimum de JS côté client et une interactivité rapide là où elle compte.

<template>
  <StaticArticle />            <!-- never hydrates -->
  <LazyCommentBox hydrate-on-visible />
  <LazyLikeButton hydrate-on-interaction="click" />
</template>

Vérification rapide

Vérifiez votre compréhension des stratégies d’hydratation.

Récapitulatif

Vous avez appris l’hydratation différée :

  • Le préfixe Lazy de Nuxt importe les composants de manière différée
  • hydrateOnVisible — sous la ligne de flottaison via IntersectionObserver
  • hydrateOnIdle — non critique, pendant les périodes d’inactivité
  • hydrateOnInteraction — déclenchée par un événement (clic/focus)
  • Le cœur de Vue les expose sous forme de fonctions utilitaires hydrate sur defineAsyncComponent

Questions Fréquemment Posées

La leçon « Stratégies d’hydratation différée » est-elle gratuite ?

Oui — le texte complet de « Stratégies d’hydratation différée » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Stratégies d’hydratation différée » ?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hydratation différée de Nuxt Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Stratégies d’hydratation différée » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Composant Vue Suspense
  2. Composants asynchrones avec defineAsyncComponent
  3. SSR en flux avec renderToWebStream
  4. Stratégies d’hydratation différée
← Retour à Vue Academy