Strømming i React 18: Slik fungerer renderToPipeableStream

Før React 18 brukte gjengivelse på serversiden renderToString, som er synkron: React gjengir hele komponenttreet til en streng før HTML sendes til nettleseren. Hvis en komponent laster inn data, må serveren vente på alle dataene før den første byten når brukeren.

React 18 introduserte renderToPipeableStream, som gjengir komponenttreet som en strøm av HTML-biter. I stedet for å vente til alt er klart, sender React HTML etter hvert som hver del av treet blir ferdig, slik at nettleseren kan begynne å gjengi synlig innhold umiddelbart.

renderToPipeableStream returnerer et objekt med to metoder: pipe(writable) og abort(). pipe tar imot en Node.js Writable-strøm (vanligvis HTTP-responsen) og starter strømming av HTML til den. abort() avbryter strømmen og brukes når forespørselen avbrytes eller en tidsavbruddsgrense overskrides.

Strømmen begynner med HTML-skallet – alt innhold som ikke blokkeres av en ventende Suspense-boundary. Dette omfatter dokumenthodet, navigasjon, bunntekst, layout-strukturen og alt innhold som er tilgjengelig synkront. Skallet strømmes umiddelbart, før noen datakrevende komponenter er ferdigbehandlet.

Komponenter inne i Suspense-boundaries som venter på data, strømmes først som fallback-UI-et sitt (for eksempel en innlastingsindikator). React sender senere en script-tagg som erstatter fallbacken med det ferdig oppløste innholdet – alt uten en gjengivelse av skallet på klientsiden.

Send bootstrapScripts: ['/static/js/client.js'] til renderToPipeableStream for å be React injisere en script-tagg på slutten av strømmen. Nettleseren laster inn denne bunten og kaller hydrateRoot, som kobler Reacts hendelsesbehandlere til det servergjengitte DOM-treet.

onShellReady utløses når HTML-skallet (alt utenfor ventende Suspense-boundaries) er klart til å sendes. Dette er riktig tidspunkt å kalle pipe(res) på – men viktigst av alt: angi HTTP-statuskoden og responsheadere før pipe kalles, siden strømming låser HTTP-statusen.

Fordi strømmingen starter umiddelbart når du kaller pipe(), må alle kall til res.setHeader og alle tilordninger til res.statusCode gjøres før pipe-kallet. Et vanlig mønster er å angi status 200 og Content-Type: text/html i tilbakeringingen onShellReady, og deretter umiddelbart kalle pipe(res).

onShellError utløses når det oppstår en feil som ikke kan gjenopprettes, før skallet er ferdig gjengitt – for eksempel når en komponent på toppnivå kaster en feil utenfor en Suspense-grense. I dette tilfellet kan du ikke strømme et delvis svar. Omdiriger i stedet til en feilside eller send et statisk HTML-dokument med feilmelding.

onAllReady utløses når hele React-treet er ferdig behandlet – inkludert alle Suspense-grenser. For søkemotorcrawlere og verktøy som forhåndsviser lenker i sosiale medier, ønsker du å sende komplett HTML uten strømming. Sjekk om forespørselen kommer fra en bot, og kall pipe(res) i onAllReady i stedet for onShellReady.

onError utløses ved feil i Suspense-grenser – React kan fortsatt strømme resten av siden mens den aktuelle grensen viser sitt fallback-grensesnitt. Bruk onError til å logge feilen i observability-pipelinen, uten å avbryte strømmingen for brukeren.

renderToPipeableStream er React 18s grunnleggende primitive for strømmende SSR på Node.js-servere. Den strømmer HTML-skallet umiddelbart via onShellReady, fyller ut Suspense-grenser etter hvert som dataene blir klare, og hydrerer klienten via bootstrapScripts. Bruk onAllReady for boter og crawlere, onShellError ved fatale feil, og angi alltid HTTP-hoder før du kaller pipe().