0Pricing
React Academy · Lezione

Hydration selettiva e streaming HTML

Utilizzi i confini Suspense per trasmettere blocchi HTML e idratare prima le isole interattive.

Hydration selettiva e streaming HTML è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Il problema della hydration dell'intera pagina

L'SSR tradizionale esegue la hydration dell'intera pagina in una volta sola. Se una parte della pagina contiene molto JavaScript, come una mappa o un grafico, blocca la hydration del resto, inclusi i semplici pulsanti interattivi.

Streaming dell'HTML con renderToPipeableStream

L'API di streaming di React 18 invia l'HTML in blocchi. Lo shell della pagina arriva immediatamente; i confini Suspense completano i contenuti man mano che sono disponibili, così gli utenti vedono l'interfaccia prima che tutti i dati siano pronti.

const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/bundle.js'],
  onShellReady() {
    res.setHeader('content-type', 'text/html');
    pipe(res);
  },
  onError(error) {
    console.error(error);
  },
});

Come funziona lo streaming in pratica

React esegue subito il rendering dei componenti che non si sospendono (lo shell). Quando i dati di un confine Suspense sono disponibili, React invia un blocco HTML per completarlo, insieme a un tag script che indica al browser dove inserirlo.

Hydration selettiva

Con lo streaming, React 18 può eseguire la hydration dei componenti in modo indipendente. Se un utente fa clic su un elemento non ancora sottoposto a hydration, React dà la priorità alla hydration di quel componente e poi continua con il resto.

I boundary di Suspense come unità di streaming

Ogni boundary di <Suspense> è un'unità di streaming. Il fallback viene inviato immediatamente; il contenuto reale arriva in streaming in un secondo momento. Annidi i boundary di Suspense per ottenere il livello di granularità di streaming appropriato.

function App() {
  return (
    <Layout>
      {/* Streams first — no data needed */}
      <Header />
      <Suspense fallback={<ArticleSkeleton />}>
        {/* Streams when article data resolves */}
        <Article />
      </Suspense>
      <Suspense fallback={<CommentsSkeleton />}>
        {/* Streams independently from Article */}
        <Comments />
      </Suspense>
    </Layout>
  );
}

Streaming di Next.js con loading.tsx

Nel router App di Next.js, loading.tsx è il fallback di Suspense. Lo shell della pagina (layout) viene inviato per primo; il contenuto della pagina arriva in streaming quando la relativa funzione async termina.

// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
  return <ArticleSkeleton />;
}

// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
  const posts = await fetchPosts(); // data fetch happens server-side
  return <PostList posts={posts} />;
}

Client Components all'interno di Suspense

I Server Components usano Suspense per lo streaming dei dati. I Client Components usano Suspense per il caricamento lazy. Entrambi traggono vantaggio dall'idratazione selettiva.

// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

Idratazione basata sulla priorità

Se l'utente interagisce con un componente non ancora idratato, ad esempio facendo clic, React 18 idrata sincronicamente prima quel componente, completando solo dopo l'idratazione delle altre parti della pagina.

onShellReady vs onAllReady

onShellReady viene eseguito quando lo shell, cioè le parti non sospese, è pronto per lo streaming. onAllReady viene eseguito quando è stato renderizzato tutto: è utile per la generazione statica o quando è necessario inviare l'intero HTML in una sola volta.

// For streaming (progressive rendering):
onShellReady() { pipe(res); }

// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }

Abort Controller

Passi il segnale di un AbortController per annullare l'SSR in caso di rendering lento, ad esempio quando viene superato il timeout.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

const { pipe } = renderToPipeableStream(<App />, {
  signal: controller.signal,
  onShellReady() { pipe(res); },
});

clearTimeout(timeoutId);

Misurare l'impatto dello streaming

Utilizzi Lighthouse o WebPageTest per misurare il Time To First Byte (TTFB) e il Largest Contentful Paint (LCP) prima e dopo l'attivazione dello streaming, così da quantificare il miglioramento.

Verifica rapida

Che cosa accade nell'idratazione selettiva di React 18 quando l'utente fa clic su un elemento non ancora idratato?

Riepilogo

L'SSR con streaming usa renderToPipeableStream e i boundary di Suspense per inviare progressivamente l'HTML. Ogni boundary di Suspense esegue lo streaming in modo indipendente. L'idratazione selettiva assegna la priorità agli elementi con cui l'utente ha interagito. In Next.js, loading.tsx è il fallback automatico di Suspense per lo streaming a livello di pagina.

Domande Frequenti

La lezione «Hydration selettiva e streaming HTML» è gratuita?

Sì — il testo completo di «Hydration selettiva e streaming HTML» è 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 «Hydration selettiva e streaming HTML»?

Utilizzi i confini Suspense per trasmettere blocchi HTML e idratare prima le isole interattive. 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 3 di 4.

Quanto tempo richiede la lezione «Hydration selettiva e streaming HTML»?

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

  1. Come funziona React SSR internamente
  2. Errori di hydration: cause e soluzioni
  3. Hydration selettiva e streaming HTML
  4. Pattern dell'architettura a isole
← Torna a React Academy