0Pricing
React Academy · Lezione

Come funziona React SSR internamente

Segua il percorso renderToString/renderToPipeableStream e il modo in cui il client completa l'hydration.

Come funziona React SSR internamente è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 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 che SSR risolve

React lato client richiede JavaScript per eseguire il rendering. Gli utenti visualizzano una pagina vuota finché JS non viene caricato ed eseguito. SSR genera in anticipo l'HTML sul server, così gli utenti vedono subito i contenuti, migliorando le prestazioni percepite e la SEO.

renderToString

L'API SSR originale: renderToString(<App />) esegue sincronicamente il rendering dell'albero dei componenti in una stringa HTML sul server.

import { renderToString } from 'react-dom/server';
import App from './App';

// In an Express handler:
app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html><body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body></html>
  `);
});

Hydration sul client

Dopo che l'HTML è arrivato, il browser lo analizza ed esegue il rendering dell'interfaccia. Quindi hydrateRoot() di React collega i gestori degli eventi e rende interattivo l'HTML statico: questa è la hydration.

// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

Cosa accade durante la hydration

React analizza contemporaneamente il DOM generato dal server e il DOM virtuale. Se coincidono, React collega i gestori senza modificare il DOM. Se differiscono, registra un avviso di hydration e corregge il DOM.

renderToPipeableStream

L'API di streaming di React 18 invia l'HTML in blocchi man mano che i dati diventano disponibili, consentendo al browser di visualizzare progressivamente i contenuti mentre il server sta ancora elaborando la richiesta.

import { renderToPipeableStream } from 'react-dom/server';

app.get('*', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/bundle.js'],
    onShellReady() {
      res.setHeader('content-type', 'text/html');
      pipe(res); // starts streaming
    },
  });
});

Suspense e streaming

Con SSR in streaming, i confini Suspense inviano prima il fallback e poi lo sostituiscono con i contenuti quando i dati sono disponibili, senza bloccare l'invio iniziale dell'HTML.

// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
  return (
    <Layout>
      <Suspense fallback={<Skeleton />}>
        <UserProfile /> {/* streams after data loads */}
      </Suspense>
    </Layout>
  );
}

Serializzazione dei dati

I dati recuperati sul server devono essere serializzati e incorporati nell'HTML, così il client può leggerli durante la hydration senza doverli recuperare nuovamente.

// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');

// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`

// Client hydration reads:
const data = window.__INITIAL_DATA__;

Differenze tra gli ambienti

Il codice del server viene eseguito in Node.js, non in un browser. Il codice che fa riferimento a window, document o localStorage va in errore sul server. Utilizzi il controllo typeof window !== 'undefined'.

const isBrowser = typeof window !== 'undefined';

function getTheme() {
  if (!isBrowser) return 'light'; // server-safe default
  return localStorage.getItem('theme') ?? 'light';
}

React Server Components e SSR

SSR esegue il rendering dei componenti in HTML a ogni richiesta. I React Server Components (RSC) sono diversi: il loro JavaScript non viene mai inviato al client e possono essere asincroni, ma RSC richiede un bundler che supporti il protocollo RSC (Next.js ecc.).

Vantaggi prestazionali dello streaming

Lo streaming SSR migliora il Time To First Byte (TTFB) per lo shell e abilita la hydration selettiva: il browser può eseguire la hydration delle isole interattive prima che l'HTML dell'intera pagina abbia terminato lo streaming.

Verifica rapida

Che cosa fa hydrateRoot() in modo diverso da createRoot() quando l'HTML del server esiste già?

Riepilogo

SSR utilizza renderToPipeableStream per inviare l'HTML prima del caricamento di JS. Il client chiama hydrateRoot() per collegare i gestori degli eventi all'HTML del server. Lo streaming SSR con Suspense invia prima lo shell e completa i contenuti in modo asincrono. Protegga le API del browser con typeof window !== 'undefined'.

Domande Frequenti

La lezione «Come funziona React SSR internamente» è gratuita?

Sì — il testo completo di «Come funziona React SSR internamente» è 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 «Come funziona React SSR internamente»?

Segua il percorso renderToString/renderToPipeableStream e il modo in cui il client completa l'hydration. 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 1 di 4.

Quanto tempo richiede la lezione «Come funziona React SSR internamente»?

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