Idratazione progressiva con idratazione selettiva

L'idratazione selettiva è una funzionalità di React 18 che consente a React di iniziare a idratare i componenti non appena arriva il relativo codice JavaScript, senza attendere il download del JavaScript dell'intera pagina. Ogni sezione suddivisa indipendentemente in bundle viene idratata quando viene caricato il relativo bundle, non tutta in una volta.

Prima di React 18, l'idratazione era un'operazione "tutto o niente": React doveva scaricare tutto il JavaScript e idratare l'intero albero prima che qualsiasi parte della pagina diventasse interattiva. React 18 supera questo vincolo: le porzioni dell'albero vengono idratate indipendentemente man mano che il relativo codice e i dati diventano disponibili.

Se l'utente fa clic su un confine Suspense o interagisce con esso prima che sia stato idratato, React dà immediatamente priorità all'idratazione di quel sottoalbero rispetto a qualsiasi altra attività di idratazione in attesa. Ciò significa che l'elemento con cui l'utente sta cercando di interagire diventa interattivo per primo, anche se non si trova nell'ordine del documento.

La combinazione di React.lazy con gli import dinamici e i confini Suspense abilita l'idratazione selettiva dei componenti il cui codice è stato suddiviso. Il browser scarica prima il bundle JavaScript principale, idratando immediatamente la shell. Ogni componente caricato pigramente viene idratato quando viene scaricato il relativo chunk, progressivamente, man mano che il browser lo recupera.

Il risultato è che il contenuto above-the-fold diventa interattivo prima ancora che il JavaScript below-the-fold sia stato scaricato. L'utente può interagire con la navigazione e la CTA della sezione hero mentre il feed dei commenti e il widget dei suggerimenti stanno ancora caricando i propri chunk JavaScript.

L'idratazione selettiva riduce il Total Blocking Time (TBT), la metrica principale per le prestazioni dell'idratazione. Nella scheda Performance di Chrome DevTools, le Long Tasks (attività di durata superiore a 50 ms) sono evidenziate in rosso. Prima dell'idratazione selettiva si potrebbe osservare una singola Long Task di 300 ms per l'idratazione completa; dopo, si osservano diverse attività più brevi distribuite nel tempo.

L'anti-pattern che compromette l'idratazione selettiva consiste nell'importare tutti i componenti all'inizio dell'app: import Footer from './Footer'. Questo obbliga il browser a scaricare, analizzare ed eseguire il codice di Footer prima che inizi qualsiasi idratazione. Sostituisca gli import di primo livello dei componenti below-the-fold con React.lazy e import dinamici.

Utilizzi const Footer = React.lazy(() => import('./Footer')) per i componenti visualizzati sotto la viewport iniziale. Li racchiuda in Suspense con un fallback semplice. Il browser assegna una priorità inferiore al recupero del bundle di Footer finché l'idratazione above-the-fold non è completa, migliorando naturalmente il TBT.

Lo streaming e l'idratazione selettiva sono complementari: lo streaming invia blocchi HTML per migliorare FCP e LCP, mentre l'idratazione selettiva elabora i chunk JavaScript per migliorare TTI e TBT. Insieme affrontano sia l'aspetto delle prestazioni relativo al "mostrare rapidamente i contenuti" sia quello relativo al "renderli rapidamente interattivi".

React Server Components porta l'idratazione selettiva a un livello ulteriore: i componenti server non producono alcun JavaScript per il client. Devono essere idratati solo i componenti client (contrassegnati con "use client"). Questo riduce la quantità complessiva di JavaScript da idratare, rendendo l'idratazione selettiva ancora più efficace.

Un pattern pratico consiste nell'usare renderToPipeableStream per l'HTML in streaming, racchiudere la pagina in una chiamata hydrateRoot principale (invece di createRoot) per abilitare la modalità di idratazione, usare React.lazy per tutte le sezioni below-the-fold e racchiudere ogni sezione in un confine Suspense. React gestisce automaticamente tutto il resto.

In che modo l'interazione dell'utente influisce sulla priorità dell'idratazione selettiva in React 18?

L'idratazione selettiva consente a React di idratare progressivamente i sottoalberi dei componenti man mano che arriva il relativo JavaScript, invece di attendere il bundle completo. Le interazioni dell'utente danno priorità all'idratazione del sottoalbero interessato. React.lazy e gli import dinamici per i contenuti below-the-fold, combinati con i confini Suspense, abilitano questo pattern progressivo. L'idratazione selettiva e l'SSR in streaming sono tecniche complementari che insieme migliorano sia la distribuzione dei contenuti sia le prestazioni dell'interattività.