Cos'è l'Hydration?

L'hydration è il processo in cui JavaScript aggiunge interattività all'HTML già renderizzato lato server. Il browser riceve una pagina completa con testo, immagini e layout già a posto, e il framework prende poi il controllo del markup, collega i listener degli eventi e trasforma la pagina statica in un'applicazione completamente interattiva.

Definizione

In un workflow SSR o SSG, il server produce l'HTML e il client scarica un bundle JavaScript che sa come gestire quell'HTML da quel momento in poi. Durante l'hydration, il framework riconcilia il proprio albero di componenti con il DOM esistente. Una volta completata l'hydration, la pagina si comporta come una single-page application: i cambiamenti di stato, le transizioni di route e gli aggiornamenti dei componenti vengono gestiti nel browser.

Perché è importante

L'hydration è il ponte tra un first paint rapido e la piena interattività. Fatta bene, gli utenti vedono immediatamente il contenuto e possono interagire con esso in un istante. Fatta male, l'hydration ritarda l'interattività, spedisce bundle sovradimensionati e produce comportamenti a scatti in cui la pagina appare pronta ma non risponde ancora agli input.

Varianti moderne

I framework più recenti introducono partial hydration, progressive hydration e architetture a isole, in cui solo le parti interattive della pagina ricevono JavaScript. Resumability e server components spingono oltre il limite, rimandando o addirittura eliminando l'hydration per i contenuti che non ne hanno bisogno. Per gli storefront commerce, queste tecniche riducono il time to interactive e migliorano i Core Web Vitals senza sacrificare esperienze ricche.

Contenuti correlati

Scopri Composable Headless Frontend · Performance and Core Web Vitals.