React Academy · leksjon

Selektiv hydrering og strømming av HTML

Bruk Suspense-grenser til å strømme HTML-biter og hydrere interaktive øyer først.

Leksjon 3 av 413 trinn

Selektiv hydrering og strømming av HTML er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 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 med hydrering av hele siden

Tradisjonell SSR hydreres på hele siden på én gang. Hvis én del av siden har mye JavaScript (for eksempel et kart eller et diagram), blokkerer den hydreringen av resten – inkludert enkle interaktive knapper.

Strømming av HTML med renderToPipeableStream

Strømme-API-et i React 18 sender HTML i deler. Sideskallet kommer umiddelbart, og Suspense-grenser fyller innholdet etter hvert som det blir klart – brukerne ser brukergrensesnittet før alle dataene er klare.

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

Slik fungerer strømming i praksis

React gjengir komponenter som ikke settes på vent, med én gang (skallet). Når dataene for en Suspense-grense blir klare, sender React en HTML-del for å fylle den inn, samt et script-element som instruerer nettleseren om hvor det skal plasseres.

Selektiv hydrering

Med strømming kan React 18 hydrere komponenter uavhengig av hverandre. Hvis en bruker klikker på et element som ennå ikke er hydrert, prioriterer React å hydrere denne komponenten først – og fortsetter deretter med resten.

Suspense-grenser som enheter for streaming

Hver <Suspense>-grense er en enhet for streaming. Fallbacken sendes umiddelbart; det faktiske innholdet strømmes inn senere. Nest Suspense-grenser for å strømme på riktig detaljnivå.

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 i Next.js med loading.tsx

I Next.js App Router er loading.tsx Suspense-fallbacken. Sideskallet (layout) strømmes først; sideinnholdet strømmes når den asynkrone funksjonen er ferdig.

// 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 i Suspense

Server Components bruker Suspense til datastrømming. Client Components bruker Suspense til lazy loading. Begge drar nytte av selektiv hydrering.

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

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

Prioritetsbasert hydrering

Hvis brukeren samhandler med en komponent som ennå ikke er hydrert (for eksempel ved et klikk), hydrerer React 18 denne komponenten synkront først, før hydreringen av andre deler av siden fullføres.

onShellReady kontra onAllReady

onShellReady utløses når skallet (de delene som ikke er suspendert) er klart til å strømmes. onAllReady utløses når alt er gjengitt – nyttig ved statisk generering eller når hele HTML-en må sendes på én gang.

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

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

AbortController

Send et AbortController-signal for å avbryte SSR ved treg gjengivelse (for eksempel når tidsavbruddet overskrides).

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

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

clearTimeout(timeoutId);

Måling av effekten av streaming

Bruk Lighthouse eller WebPageTest til å måle Time To First Byte (TTFB) og Largest Contentful Paint (LCP) før og etter at streaming aktiveres, slik at forbedringen kan tallfestes.

Kort kontroll

Hva skjer ved selektiv hydrering i React 18 når brukeren klikker på et element som ennå ikke er hydrert?

Besvar den i den interaktive leksjonen

Oppsummering

Streaming-SSR bruker renderToPipeableStream og Suspense-grenser til å sende HTML progressivt. Hver Suspense-grense strømmes uavhengig. Selektiv hydrering prioriterer elementer brukeren har samhandlet med. I Next.js er loading.tsx den automatiske Suspense-fallbacken for streaming på sidenivå.

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 «Selektiv hydrering og strømming av HTML» gratis?

Ja – hele teksten i «Selektiv hydrering og strømming av HTML» 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 «Selektiv hydrering og strømming av HTML»?

Bruk Suspense-grenser til å strømme HTML-biter og hydrere interaktive øyer først. 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 3 av 4.

Hvor lang tid tar leksjonen «Selektiv hydrering og strømming av HTML»?

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