Selektiv hydration og streaming af HTML
Brug Suspense-grænser til at streame HTML-fragmenter og hydrere interaktive øer først.
Selektiv hydration og streaming af HTML er en gratis React Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.
Problemet med hydrering af hele siden
Traditionel SSR hydrere hele siden på én gang. Hvis en del af siden har tung JavaScript (f.eks. et kort eller et diagram), blokerer det hydreringen af resten — herunder enkle interaktive knapper.
Streaming af HTML med renderToPipeableStream
React 18's streaming-API sender HTML i dele. Sidegrundlaget ankommer med det samme, og Suspense-grænser udfylder indholdet, efterhånden som det bliver klar — brugerne ser brugerfladen, før alle data er klar.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});Sådan fungerer streaming i praksis
React gengiver straks komponenter, der ikke suspenderer (sidegrundlaget). Når dataene for en Suspense-grænse er klar, sender React en HTML-del for at udfylde den samt et script-tag, der fortæller browseren, hvor den skal placere den.
Selektiv hydrering
Med streaming kan React 18 hydrere komponenter uafhængigt af hinanden. Hvis en bruger klikker på et element, der endnu ikke er hydreret, prioriterer React at hydrere den komponent først — og fortsætter derefter med resten.
Suspense-grænser som streamingenheder
Hver <Suspense>-grænse er en streamingenhed. Reserveindholdet sendes med det samme, mens det egentlige indhold streames senere. Indlejr Suspense-grænser for at streame på det rette detaljeringsniveau.
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 er loading.tsx Suspense-reserveindholdet. Sideskallen (layoutet) streames først, mens sideindholdet streames, når den asynkrone funktion er færdig.
// 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 inde i Suspense
Serverkomponenter bruger Suspense til streaming af data. Klientkomponenter bruger Suspense til lazy loading. Begge drager fordel af selektiv hydrering.
// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}Prioritetsbaseret hydrering
Hvis du interagerer med en komponent, der endnu ikke er hydreret (f.eks. ved et klik), hydreres den synkront først i React 18, før hydreringen af andre dele af siden færdiggøres.
onShellReady kontra onAllReady
onShellReady udløses, når skallen (de dele, der ikke er suspenderet) er klar til streaming. onAllReady udløses, når alt er gengivet — det er nyttigt til statisk generering, eller når du skal sende hele HTML'en 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 med for at annullere SSR ved langsomme gengivelser (f.eks. når tidsgrænsen 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 af streamingens effekt
Brug Lighthouse eller WebPageTest til at måle Tid til første byte (TTFB) og største indholdselement (LCP) før og efter aktivering af streaming, så du kan kvantificere forbedringen.
Hurtigt tjek
Hvad sker der ved selektiv hydrering i React 18, når du klikker på et element, der endnu ikke er hydreret?
Opsamling
Streaming-SSR bruger renderToPipeableStream og Suspense-grænser til at sende HTML trinvist. Hver Suspense-grænse streames uafhængigt. Selektiv hydrering prioriterer elementer, du har interageret med. I Next.js er loading.tsx det automatiske Suspense-reserveindhold ved streaming på sideniveau.
Lær React med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 88
- Lektioner
- 324
Ofte stillede spørgsmål
Er lektionen “Selektiv hydration og streaming af HTML” gratis?
Ja — hele teksten til “Selektiv hydration og streaming af HTML” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Selektiv hydration og streaming af HTML”?
Brug Suspense-grænser til at streame HTML-fragmenter og hydrere interaktive øer først. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Academy?
Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Selektiv hydration og streaming af HTML”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Academy-lektion?
Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Sådan fungerer React SSR under motorhjelmen
- Hydration-fejl: årsager og løsninger
- Selektiv hydration og streaming af HTML
- Mønsteret Islands Architecture