React Academy · Lezione

Pattern dell'architettura a isole

Distribuisca HTML prevalentemente statico e idrati solo i widget interattivi per ottimizzare il Time-To-Interactive.

Pattern dell'architettura a isole è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cos'è l'architettura a isole

L'architettura a isole invia principalmente HTML statico con piccole sezioni interattive, idratate in modo indipendente (le isole). La maggior parte della pagina non richiede JavaScript; solo i widget che necessitano di interattività diventano isole React.

Il problema che risolve

L'SSR tradizionale idrata l'intera pagina anche se il 90% del contenuto è statico, come intestazioni, testo e immagini. Le isole idratano solo le parti interattive, riducendo drasticamente il JavaScript inviato al browser.

Concetto fondamentale

Immagini la pagina come un mare di HTML statico con isole di interattività che vi galleggiano. Ogni isola viene idratata in modo indipendente e, se necessario, può usare un framework diverso.

Astro come framework per le isole

Astro ha reso popolare l'architettura a isole. Per impostazione predefinita, i componenti non inviano JavaScript. Aggiunga una direttiva client:* per attivare l'idratazione.

---
import Header from './Header.astro';      // static — 0 JS
import SearchBar from './SearchBar.jsx';  // island — hydrated
import Footer from './Footer.astro';      // static — 0 JS
---
<Header />
<SearchBar client:load />   <!-- hydrate immediately -->
<SearchBar client:idle />   <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />

Direttive di idratazione

I framework a isole offrono un controllo granulare sul momento dell'idratazione: client:load (immediata), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (media query CSS).

Implementare le isole in Next.js

Il router App di Next.js approssima il modello delle isole tramite la separazione tra Server Components e Client Components. I Server Components sono statici; i Client Components sono le isole.

// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
  const product = await getProduct();
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* Only the interactive button is a Client Component island */}
      <AddToCartButton product={product} />
    </article>
  );
}

Isole manuali con React lazy

Senza un framework dedicato, può ottenere il modello delle isole caricando in modo lazy i componenti interattivi solo dopo il caricamento della pagina.

const HeavyWidget = lazy(() => import('./HeavyWidget'));

function Page() {
  const [show, setShow] = useState(false);
  const containerRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setShow(true);
    });
    obs.observe(containerRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={containerRef}>
      {show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
    </div>
  );
}

Compromessi

Vantaggi: JavaScript minimo, TTI rapido, contenuti statici memorizzati nella cache in modo efficace. Costi: le isole non possono condividere facilmente lo stato, perché usano contesti JavaScript separati, e l'architettura è più complessa rispetto a una SPA standard.

Condividere lo stato tra le isole

Utilizzi meccanismi nativi del browser, come eventi personalizzati, URL e localStorage, oppure un piccolo singleton di store condiviso per comunicare tra isole indipendenti.

// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);

// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));

Quando usare l'architettura a isole

È ideale per siti ricchi di contenuti, come blog, e-commerce e siti di marketing, in cui la maggior parte dei contenuti è statica e solo pochi componenti necessitano di interattività, come ricerca, carrello e moduli.

Isole vs SSR vs SPA

SPA: tutto il JavaScript, con idratazione completa. SSR: il server esegue il rendering e idrata tutto. Isole: il server esegue il rendering di tutto, ma vengono idratati solo i widget interattivi. Per i siti ricchi di contenuti, le isole offrono le prestazioni migliori.

Verifica rapida

Qual è il principale vantaggio in termini di prestazioni del modello dell'architettura a isole?

Riepilogo

L'architettura a isole mantiene la maggior parte dell'HTML statico, senza JavaScript, e idrata solo i widget interattivi. Utilizzi Astro per un framework progettato appositamente per le isole, oppure approssimi il modello con i Server Components e i Client Components di Next.js. Per le isole non critiche, utilizzi l'idratazione lazy con client:visible/IntersectionObserver.

Domande Frequenti

La lezione «Pattern dell'architettura a isole» è gratuita?

Sì — il testo completo di «Pattern dell'architettura a isole» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Pattern dell'architettura a isole»?

Distribuisca HTML prevalentemente statico e idrati solo i widget interattivi per ottimizzare il Time-To-Interactive. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Pattern dell'architettura a isole»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a React Academy