React Academy · leksjon

Slik fungerer React SSR under panseret

Følg flyten fra renderToString/renderToPipeableStream, og se hvordan klienten overtar med hydrering.

Leksjon 1 av 412 trinn

Slik fungerer React SSR under panseret er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Problemet SSR løser

React på klientsiden krever JavaScript for å gjengi innhold. Brukere ser en tom side til JavaScript er lastet inn og kjørt. SSR forhåndsgjengir HTML på serveren, slik at brukerne ser innhold umiddelbart, noe som forbedrer den opplevde ytelsen og SEO.

renderToString

Det opprinnelige SSR-API-et: renderToString(<App />) gjengir komponenttreet synkront som en HTML-streng på serveren.

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>
  `);
});

Hydrering på klientsiden

Etter at HTML-en er mottatt, analyserer nettleseren den og gjengir brukergrensesnittet. Deretter kobler Reacts hydrateRoot() til hendelseslyttere og gjør den statiske HTML-en interaktiv – dette kalles hydrering.

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

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

Hva skjer under hydrering

React går samtidig gjennom det servergjengitte DOM-et og det virtuelle DOM-et. Hvis de samsvarer, kobler React til lytterne uten å endre DOM-et. Hvis de er forskjellige, logger React en hydreringsadvarsel og korrigerer DOM-et.

renderToPipeableStream

Strømme-API-et i React 18 sender HTML i deler etter hvert som data blir tilgjengelige, slik at nettleseren gradvis kan vise innhold mens serveren fortsatt behandler forespørselen.

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 og strømming

Med SSR-strømming strømmes reserveinnholdet i Suspense-grenser først, og erstattes deretter med innholdet når dataene er klare – uten å blokkere den første overføringen av 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>
  );
}

Serialisering av data

Data som hentes på serveren, må serialiseres og bygges inn i HTML-en slik at klienten kan lese dem under hydrering uten å hente dem på nytt.

// 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__;

Forskjeller mellom miljøer

Serverkode kjører i Node.js, ikke i en nettleser. Kode som refererer til window, document eller localStorage, krasjer på serveren. Beskytt den med 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 kontra SSR

SSR gjengir komponenter som HTML ved hver forespørsel. React Server Components (RSC) er annerledes – JavaScript-koden deres sendes aldri til klienten, og de kan være asynkrone. RSC krever imidlertid en bundler som støtter RSC-protokollen (Next.js og lignende).

Ytelsesfordeler ved strømming

SSR-strømming forbedrer Time To First Byte (TTFB) for skallet og muliggjør selektiv hydrering – nettleseren kan hydrere interaktive øyer før HTML-en for hele siden er ferdig strømmet.

Hurtigsjekk

Hva gjør Reacts hydrateRoot() annerledes enn createRoot() når serverens HTML allerede finnes?

Besvar den i den interaktive leksjonen

Oppsummering

SSR bruker renderToPipeableStream til å sende HTML før JavaScript lastes inn. Klienten kaller hydrateRoot() for å koble hendelseslyttere til serverens HTML. SSR-strømming med Suspense sender skallet først og fyller innhold asynkront. Beskytt nettleser-API-er med typeof window !== 'undefined'.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Slik fungerer React SSR under panseret» gratis?

Ja – hele teksten i «Slik fungerer React SSR under panseret» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Slik fungerer React SSR under panseret»?

Følg flyten fra renderToString/renderToPipeableStream, og se hvordan klienten overtar med hydrering. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Slik fungerer React SSR under panseret»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy