Architettura a isole: idratazione selettiva

Islands Architecture, termine coniato da Jason Miller nel 2020, considera una pagina web come HTML perlopiù statico con "isole" interattive isolate incorporate al suo interno. L'oceano statico di HTML viene inviato al browser così com'è. Solo le isole interattive scaricano ed eseguono JavaScript, rendendo la quantità di JavaScript proporzionale all'interattività effettiva.

Ogni isola è un componente sottoposto a hydration in modo indipendente. Il server esegue il rendering dell'HTML iniziale dell'isola insieme al resto della pagina. Quando viene caricato il JavaScript dell'isola, React esegue l'hydration solo del sottoalbero di quel componente. L'HTML che circonda le isole non viene mai toccato da JavaScript: è davvero statico.

In una pagina di un articolo di blog realizzata con Islands Architecture, la quantità di JavaScript potrebbe essere di 5 kB per una singola isola con un pulsante Mi piace. La stessa pagina realizzata come SPA React potrebbe inviare oltre 200 kB di JavaScript per eseguire l'hydration dell'intera pagina. L'approccio delle isole rende la quantità di JavaScript proporzionale all'interattività, non alle dimensioni della pagina.

Astro, il principale framework per Islands Architecture, supporta isole realizzate con framework diversi nella stessa pagina. È possibile avere un'isola React accanto a un'isola Vue e a un'isola in JavaScript vanilla. Ogni isola viene inclusa in un bundle indipendente, quindi gli utenti scaricano solo il codice dei framework utilizzati dalle isole visibili.

La direttiva client:load esegue immediatamente l'hydration dell'isola al caricamento della pagina. La si usi per le isole immediatamente visibili e interattive, come un menu di navigazione o una sezione hero con un campo di ricerca. È la strategia di hydration con la priorità più alta.

La direttiva client:idle attende che il thread principale del browser sia inattivo, dopo il caricamento dei contenuti essenziali, prima di eseguire l'hydration dell'isola. È ideale per i widget sotto la parte inizialmente visibile o per le interazioni secondarie non necessarie subito, come una barra per la condivisione sui social.

La direttiva client:visible usa un Intersection Observer per eseguire l'hydration dell'isola solo quando questa entra nell'area visibile. È ideale per le isole che si trovano in profondità nella pagina, come una sezione dei commenti o un carosello di prodotti correlati, che molti utenti potrebbero non raggiungere mai. JavaScript non viene nemmeno caricato finché non è necessario.

La direttiva client:only salta completamente il rendering lato server ed esegue il rendering dell'isola solo nel browser. È necessaria per i componenti che usano API disponibili esclusivamente nel browser, come window e document, o che dipendono dallo stato lato client al momento del mount. Lo svantaggio è l'assenza di HTML renderizzato dal server per quell'isola.

Islands Architecture risolve completamente il problema dell'hydration assicurando che JavaScript venga caricato ed eseguito solo per i componenti realmente interattivi. Un articolo di blog con un pulsante Mi piace esegue l'hydration solo dell'isola del pulsante: il testo dell'articolo di 1200 parole, l'intestazione e il footer non richiedono alcuna esecuzione di JavaScript lato client.

Ogni isola ha uno stato isolato. Le isole non possono condividere direttamente lo stato React perché sono alberi React separati. È una scelta intenzionale: se due componenti devono condividere lo stato, dovrebbero essere uniti in un'unica isola. La comunicazione tra le isole usa parametri URL, eventi DOM o librerie di gestione dello stato leggere.

I siti migrati da una SPA React a Islands Architecture, come il sito della documentazione di Astro, riportano miglioramenti notevoli: la quantità di JavaScript diminuisce del 70-90%, il TTI migliora di 2-4 secondi sui dispositivi mobili e i punteggi delle prestazioni in Lighthouse passano da valori intorno a 60 a oltre 90. I vantaggi sono più evidenti nelle pagine ricche di contenuti.

L'architettura a isole mantiene la maggior parte della pagina come HTML statico e idrata solo i componenti interattivi isolati. Astro fornisce direttive di idratazione: client:load (immediata), client:idle (dopo che il browser è inattivo), client:visible (quando l'elemento entra nella viewport) e client:only (rendering esclusivamente lato client). Ogni isola viene idratata in modo indipendente, quindi la quantità di JavaScript è proporzionale all'interattività, non alle dimensioni della pagina.