Angular Academy · Lezione

Abilitare l'hydration completa

Attivare l'hydration per evitare il re-rendering

Abilitare l'hydration completa è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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 Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Attivare la hydration

La hydration completa si abilita aggiungendo provideClientHydration() ai provider dell'applicazione. Lo schematico ng add @angular/ssr lo aggiunge automaticamente.

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Dove inserirla

Va inserita nei provider di appConfig del browser, la stessa configurazione usata per avviare il client. La configurazione del server viene integrata con provideServerRendering().

Cosa significa completa

La hydration completa (eager) sottopone a hydration l'intero albero dei componenti non appena viene caricato JavaScript e viene avviato Angular. Ogni componente diventa interattivo immediatamente.

Replay degli eventi

Abiliti withEventReplay() per acquisire e riprodurre in seguito le interazioni dell'utente che si verificano prima del completamento della hydration, evitando di perdere i clic sui dispositivi lenti.

import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

providers: [provideClientHydration(withEventReplay())]

Cache di trasferimento HTTP

Quando la hydration è attiva, per impostazione predefinita le risposte GET di HttpClient provenienti dal server vengono memorizzate in TransferState, così il client non recupera nuovamente gli stessi dati dopo l'avvio.

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

Verificare la hydration

Apra la console in modalità di sviluppo. Angular registra le statistiche della hydration (componenti sottoposti a hydration, nodi riutilizzati). Se non vengono visualizzati avvisi di discrepanze, la hydration è riuscita correttamente.

// Angular hydrated 24 component(s) and 187 node(s)

Correggere le discrepanze

Se visualizza errori di discrepanza NG0500, cerchi template non deterministici o modifiche manuali al DOM. Renda il markup deterministico, in modo che i risultati del server e del client coincidano.

Proteggere le API del browser

Il codice che accede a window o localStorage durante il rendering iniziale può modificare il markup tra server e client. Lo protegga con isPlatformBrowser oppure lo esegua dopo l'inizializzazione della vista.

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

Compromesso della hydration completa

La hydration completa è semplice, ma scarica ed esegue subito il JavaScript di tutti i componenti. Nelle app di grandi dimensioni questo può ritardare l'interattività, un problema affrontato dalla hydration incrementale.

i18n e hydration

La hydration funziona con i18n di Angular, ma è necessario assicurarsi che il contenuto tradotto sia deterministico. Locales diversi tra server e client causano errori di hydration.

Verifica per la produzione

Prima della pubblicazione, esegua la build per la produzione, serva l'output SSR e verifichi nella rete e nella console che la hydration venga eseguita senza discrepanze e che la cache di trasferimento impedisca richieste duplicate.

Verifica rapida

Verifichi la Sua conoscenza della hydration completa.

Riepilogo

Ha abilitato la hydration completa con provideClientHydration(), aggiunto withEventReplay() per i clic precedenti alla hydration, utilizzato la cache di trasferimento HTTP, protetto le API del browser e verificato una hydration corretta. La hydration completa è semplice, ma carica tutto il JS in anticipo.

Domande Frequenti

La lezione «Abilitare l'hydration completa» è gratuita?

Sì — il testo completo di «Abilitare l'hydration completa» è 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 Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Abilitare l'hydration completa»?

Attivare l'hydration per evitare il re-rendering Eserciti Angular 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 Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular 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 2 di 4.

Quanto tempo richiede la lezione «Abilitare l'hydration completa»?

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 Angular Academy?

Sì. Ogni lezione Angular 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

← Torna a Angular Academy