0Pricing
Vue Academy · Lezione

Strategie di hydration differita

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hydration lazy di Nuxt.

Strategie di hydration differita è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Il problema del costo della hydration

L'SSR invia HTML pronto per la visualizzazione, ma il client deve comunque eseguire la hydration di ogni componente per renderlo interattivo. Eseguire la hydration di tutto in anticipo blocca il thread principale e ritarda l'interattività (TTI).

La hydration differita (lazy) rimanda la hydration dei componenti finché non sono effettivamente necessari.

Prefisso Auto-Lazy di Nuxt

In Nuxt, anteporre Lazy al nome di un componente fa sì che venga importato in modo lazy. In combinazione con le strategie di hydration, rimanda sia il download del codice JavaScript sia il lavoro di hydration.

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

hydrateOnVisible

hydrateOnVisible esegue la hydration di un componente solo quando entra nell'area visibile della finestra, usando internamente un IntersectionObserver. È perfetto per le sezioni below the fold.

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

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

hydrateOnVisible con margine

È possibile passare le opzioni di IntersectionObserver per avviare la hydration poco prima che l'elemento diventi visibile, rendendo l'esperienza più fluida.

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

hydrateOnIdle

hydrateOnIdle attende che il browser sia inattivo (tramite requestIdleCallback) prima di eseguire la hydration. Lo usi per i widget non critici che non devono competere con l'interattività iniziale.

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

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

hydrateOnInteraction

hydrateOnInteraction rimanda la hydration finché sull'elemento non viene generato un evento DOM specificato (click, focus, mouseover). Il componente resta HTML statico finché l'utente non interagisce.

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

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

hydrateOnMediaQuery

hydrateOnMediaQuery esegue la hydration solo quando una media query corrisponde, ad esempio per idratare una barra laterale disponibile solo su desktop e nascosta sui dispositivi mobili, evitando lavoro inutile sugli schermi piccoli.

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

API core di Vue: helper per la hydration

Al di fuori di Nuxt, le stesse strategie sono disponibili come helper per la hydration passati all'opzione hydrate di defineAsyncComponent. I prefissi di Nuxt sono semplicemente una sintassi abbreviata per questi helper.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

Scegliere la strategia giusta

Scelga la strategia in base all'obiettivo:

  • Visibile — contenuti sotto la piega (recensioni, piè di pagina)
  • Inattività — widget in background (analisi dei dati, newsletter)
  • Interazione — interfaccia mostrata da un'azione dell'utente (menu, modali)
  • Media query — interfaccia specifica per il dispositivo

Aspetti critici da considerare

La hydration differita migliora il TTI, ma il componente resta non interattivo finché non si attiva il relativo trigger. Per le strategie basate sull'interazione, il primo click viene utilizzato per avviare la hydration e può quindi sembrare leggermente ritardato. Riservi la hydration eager all'interfaccia con le principali call to action.

Integrazione con le isole

L'idratazione differita si abbina all'architettura a isole: la maggior parte della pagina è HTML statico renderizzato sul server e solo le isole interattive vengono idratate in modo differito, secondo la strategia. Il risultato è una quantità minima di JavaScript lato client e un'interattività rapida dove serve.

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

Verifica rapida

Verifichi la Sua comprensione delle strategie di hydration.

Riepilogo

Ha imparato a usare l'idratazione differita:

  • Il prefisso Lazy di Nuxt importa i componenti in modo differito
  • hydrateOnVisible — contenuti sotto la piega tramite IntersectionObserver
  • hydrateOnIdle — contenuti non critici durante il tempo di inattività
  • hydrateOnInteraction — attivata da eventi come clic o focus
  • Il core di Vue espone questi strumenti come helper hydrate su defineAsyncComponent

Domande Frequenti

La lezione «Strategie di hydration differita» è gratuita?

Sì — il testo completo di «Strategie di hydration differita» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Strategie di hydration differita»?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hydration lazy di Nuxt. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Strategie di hydration differita»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Componente Vue Suspense
  2. Componenti asincroni con defineAsyncComponent
  3. SSR in streaming con renderToWebStream
  4. Strategie di hydration differita
← Torna a Vue Academy