Che cos'è l'hydration

Hydration è il processo mediante il quale l'app Angular lato client riutilizza l'HTML renderizzato dal server, collegando listener degli eventi e stato al DOM esistente invece di eliminarlo e renderizzarlo nuovamente.

SSR legacy utilizzava un'idratazione distruttiva: il client eliminava il DOM del server e lo renderizzava nuovamente da zero. Questo causava uno sfarfallio visibile e vanificava il lavoro del server.

Angular moderno esegue un'idratazione non distruttiva: percorre il DOM esistente, lo associa all'albero dei componenti e riutilizza i nodi. Niente sfarfallii, meno lavoro e prestazioni migliori.

Riutilizzare l'HTML del server mantiene visualizzato il contenuto principale, contribuendo a migliorare LCP, ed evita gli spostamenti del layout dovuti al nuovo rendering, contribuendo a migliorare CLS. L'app diventa interattiva senza essere ridisegnata.

Fase uno: il server esegue il rendering dell'HTML e lo invia. Fase due: il browser scarica JavaScript, avvia Angular e idrata il markup esistente, rendendolo interattivo.

L'idratazione presuppone che l'albero dei componenti del client produca la stessa struttura generata dal server. Se le strutture divergono, Angular segnala una mancata corrispondenza durante l'idratazione.

La manipolazione diretta del DOM, i rami esclusivi del browser che modificano il markup, il nesting HTML non valido e i contenuti non deterministici (come Math.random() o Date.now() nei template) causano mancate corrispondenze.

Non manipoli il DOM in modo imperativo (ad esempio con innerHTML al di fuori di Angular) durante SSR. Lasci che sia Angular a gestire il DOM, così client e server rimarranno sincronizzati.

Per un componente che non può realmente essere idratato, come un widget di terze parti che modifica il DOM, ne disabiliti l'idratazione con ngSkipHydration; Angular renderizzerà nuovamente soltanto quel sottoalbero.

La hydration si applica solo quando è presente HTML renderizzato dal server da riutilizzare. Un'applicazione CSR pura non ha nulla da sottoporre a hydration; la hydration è la parte client del modello SSR.

La hydration può essere completa (l'intera app viene sottoposta a hydration al caricamento) oppure incrementale (alcune parti vengono sottoposte a hydration su richiesta). Scegliere la strategia corretta è fondamentale per le prestazioni, come verrà illustrato nelle lezioni successive.

Verifichi la Sua comprensione della hydration.

La hydration riutilizza in modo non distruttivo l'HTML del server sul client, migliorando LCP e CLS. Le discrepanze possono derivare da modifiche manuali al DOM o da markup non deterministico; usi ngSkipHydration come soluzione di ripiego. La hydration è la parte client di SSR.