React Academy · Lektion

Selektiv hydration och strömmad HTML

Använd Suspense-gränser för att strömma HTML-delar och hydrera interaktiva öar först.

Lektion 3 av 413 steg

Selektiv hydration och strömmad HTML är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Problemet med hydrering av hela sidan

Traditionell SSR hydrerar hela sidan på en gång. Om en del av sidan innehåller mycket JavaScript (till exempel en karta eller ett diagram) blockerar den hydreringen av resten – även av enkla interaktiva knappar.

Strömmande HTML med renderToPipeableStream

React 18:s streaming-API skickar HTML i delar. Sidans skal kommer direkt, och Suspense-gränser fyller på innehåll när det blir tillgängligt – användarna ser gränssnittet innan all data är klar.

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

Så fungerar strömning i praktiken

React renderar omedelbart de komponenter som inte avbryts (skalet). När data för en Suspense-gräns blir tillgänglig skickar React en HTML-del som fyller den, samt en skripttagg som instruerar webbläsaren var den ska placera den.

Selektiv hydrering

Med strömning kan React 18 hydrera komponenter oberoende av varandra. Om en användare klickar på ett element som ännu inte har genomgått hydrering prioriterar React att hydrera den komponenten först och fortsätter sedan med resten.

Suspense-gränser som streamingenheter

Varje <Suspense>-gräns är en streamingenhet. Fallback-innehållet skickas omedelbart; det riktiga innehållet streamas in senare. Kapsla Suspense-gränser i varandra för att streama med rätt granularitet.

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

Next.js-streaming med loading.tsx

I Next.js App Router är loading.tsx Suspense-fallbacken. Sidans skal (layouten) streamas först; sidinnehållet streamas när den asynkrona funktionen har lösts.

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

Klientkomponenter i Suspense

Server Components använder Suspense för dataströmning. Client Components använder Suspense för lazy loading. Båda drar nytta av selektiv hydrering.

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

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

Prioritetsbaserad hydrering

Om användaren interagerar med en komponent som ännu inte har hydrerats (till exempel genom ett klick), hydrerar React 18 den komponenten synkront först, innan hydreringen av andra delar av sidan slutförs.

onShellReady jämfört med onAllReady

onShellReady körs när skalet (delarna som inte väntar på Suspense) är redo att streamas. onAllReady körs när allt har renderats – användbart vid statisk generering eller när hela HTML-koden måste skickas på en gång.

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

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

AbortController

Skicka en signal från AbortController för att avbryta SSR vid långsamma renderingar (till exempel om en tidsgräns överskrids).

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äta effekten av streaming

Använd Lighthouse eller WebPageTest för att mäta Time To First Byte (TTFB) och Largest Contentful Paint (LCP) före och efter att streaming har aktiverats, så att förbättringen kan kvantifieras.

Snabbkontroll

Vad händer vid selektiv hydrering i React 18 när användaren klickar på ett element som ännu inte har hydrerats?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Streaming-SSR använder renderToPipeableStream och Suspense-gränser för att skicka HTML stegvis. Varje Suspense-gräns streamas oberoende. Selektiv hydrering prioriterar element som användaren har interagerat med. I Next.js är loading.tsx den automatiska Suspense-fallbacken för streaming på sidnivå.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Selektiv hydration och strömmad HTML” gratis?

Ja – hela texten till ”Selektiv hydration och strömmad HTML” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Selektiv hydration och strömmad HTML”?

Använd Suspense-gränser för att strömma HTML-delar och hydrera interaktiva öar först. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Selektiv hydration och strömmad HTML”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till React Academy