Confini Suspense e priorità dello streaming

I confini Suspense sono l'unità fondamentale della granularità dello streaming. Ogni confine Suspense nell'albero dei componenti crea una sezione che può essere trasmessa in modo indipendente: React può risolvere e trasmettere ogni confine secondo i propri tempi, indipendentemente dagli altri.

La shell comprende tutto ciò che si trova al di fuori dei confini Suspense: layout, navigazione, piè di pagina e qualsiasi contenuto disponibile in modo sincrono. La shell viene trasmessa per prima e rapidamente, offrendo subito agli utenti la struttura della pagina mentre le sezioni che dipendono dai dati vengono caricate in background.

Quando React trasmette la shell, ogni confine Suspense i cui dati non sono ancora disponibili esegue il rendering della propria interfaccia di fallback, in genere uno skeleton di caricamento o uno spinner. Questo fallback è incluso nella risposta HTML iniziale, quindi l'utente vede subito un indicatore di caricamento invece di uno spazio vuoto.

Quando i dati di un confine Suspense vengono risolti, React trasmette l'HTML risolto insieme a un piccolo script inline. Lo script sposta il contenuto appena trasmesso da un elemento template nascosto alla posizione corretta nel DOM, sostituendo il fallback senza ricaricare completamente la pagina.

React utilizza il pattern dell'elemento template HTML: il contenuto Suspense risolto viene trasmesso in un template nascosto, quindi uno script chiama una funzione interna di React per trasferire il contenuto del template nella posizione corretta del DOM. In questo modo la sostituzione può manipolare il DOM senza dipendere da un framework JavaScript.

I confini Suspense annidati hanno tempistiche di risoluzione indipendenti. Un confine Suspense interno può essere risolto prima di quello esterno: React trasmette il contenuto interno non appena è pronto, indipendentemente dal fatto che il confine esterno sia stato risolto. In questo modo si massimizza il parallelismo nel caricamento dei dati.

Un posizionamento efficace di Suspense inserisce i componenti lenti e dipendenti dai dati all'interno dei confini Suspense, lasciando all'esterno i contenuti rapidi, statici o disponibili in modo sincrono. Le barre di navigazione, le sezioni hero con testo statico e i piè di pagina vanno lasciati all'esterno. Gli elenchi di prodotti, le dashboard degli utenti e i feed dei commenti vanno inseriti all'interno.

React trasmette i confini Suspense man mano che vengono risolti, non necessariamente nell'ordine in cui compaiono nel documento. Una sezione sotto la piega può essere risolta prima di una sezione visibile inizialmente se richiede meno dati. React gestisce correttamente l'inserimento nel DOM indipendentemente dall'ordine dello streaming.

L'idratazione selettiva di React 18 risponde all'interazione dell'utente: se l'utente fa clic o passa il cursore su un confine Suspense che non è ancora stato idratato, React dà priorità all'idratazione di quel confine. In questo modo le interazioni risultano reattive anche quando altre parti della pagina sono ancora in fase di idratazione.

Un numero maggiore di confini Suspense offre più flessibilità nello streaming, ma un eccesso di confini aggiunge il sovraccarico degli script inline per la sostituzione. Una regola pratica consiste nell'inserire intere "sezioni" (contenuto above-the-fold, barra laterale, feed below-the-fold) invece dei singoli componenti. Da uno a tre confini Suspense per pagina rappresentano spesso il compromesso migliore.

Nella scheda Network di Chrome DevTools, utilizzi "Preserve log" e osservi la risposta durante lo streaming: il documento HTML cresce a blocchi. La scheda Performance mostra gli indicatori FCP e LCP; li confronti tra build con e senza streaming per quantificare il miglioramento. Imposti la limitazione su Fast 3G per accentuare l'effetto.

Cosa accade al fallback di un confine Suspense nella risposta HTML iniziale trasmessa in streaming?

I confini Suspense suddividono l'albero React in sezioni che possono essere trasmesse in modo indipendente. La shell (al di fuori di Suspense) viene trasmessa per prima; i fallback compaiono immediatamente per i confini in attesa; il contenuto risolto sostituisce i fallback tramite script inline. I confini annidati hanno tempistiche indipendenti. Posizioni i confini a livello di sezione per ottenere una granularità ottimale dello streaming e lasci che il sistema di priorità di React gestisca l'ordine dell'idratazione determinato dalle interazioni.