Streaming i React 18: Sådan fungerer renderToPipeableStream

Før React 18 brugte serverside-gengivelse renderToString, som er synkron: React gengiver hele komponenttræet til en streng, før der sendes HTML til browseren. Hvis en komponent indlæser data, skal serveren vente på alle data, før den første byte når frem til brugeren.

React 18 introducerede renderToPipeableStream, som gengiver komponenttræet som en strøm af HTML-fragmenter. I stedet for at vente på, at alt er klar, sender React HTML, efterhånden som hver del af træet bliver færdig, så browseren straks kan begynde at gengive det synlige indhold.

renderToPipeableStream returnerer et objekt med to metoder: pipe(writable) og abort(). pipe accepterer en Node.js Writable-strøm (typisk HTTP-svaret) og begynder at sende HTML til den. abort() annullerer strømmen og bruges, når anmodningen annulleres, eller en tidsgrænse overskrides.

Strømmen begynder med HTML-skallen — alt det indhold, der ikke blokeres af en ventende Suspense-grænse. Det omfatter dokumentets head, navigation, sidefod, layoutets faste ramme og alt indhold, der er tilgængeligt synkront. Skallen sendes straks, før datakrævende komponenter er færdigbehandlet.

Komponenter inde i Suspense-grænser, der venter på data, sendes først som deres reservevisning (f.eks. en indlæsningsindikator). React sender senere et script-tag, der erstatter reservevisningen med det færdigbehandlede indhold — uden en ny gengivelse af skallen på klientsiden.

Send bootstrapScripts: ['/static/js/client.js'] til renderToPipeableStream for at fortælle React, at der skal indsættes et script-tag i slutningen af strømmen. Browseren indlæser denne pakke og kalder hydrateRoot, som tilknytter Reacts hændelseshandlere til den serverrenderede DOM.

onShellReady udløses, når HTML-skallen (alt uden for ventende Suspense-grænser) er klar til at blive sendt. Det er det rigtige tidspunkt at kalde pipe(res) — men det er vigtigt at angive HTTP-statuskoden og svarheaderne, før du kalder pipe, fordi strømleveringen fastlåser HTTP-statuskoden.

Da streaming begynder med det samme, når du kalder pipe(), skal alle tildelinger til res.setHeader eller res.statusCode ske før kaldet til pipe. Et almindeligt mønster er at sætte status til 200 og Content-Type: text/html i callback-funktionen onShellReady og derefter kalde pipe(res) med det samme.

onShellError udløses, når der opstår en fejl, som ikke kan genoprettes fra, før skallen er færdig med at blive gengivet — for eksempel hvis en komponent på øverste niveau kaster en fejl uden for en Suspense-grænse. I dette tilfælde kan du ikke streame et delvist svar. Omdiriger i stedet til en fejlside, eller send et statisk HTML-dokument med fejl.

onAllReady udløses, når hele React-træet er færdigbehandlet — inklusive alle Suspense-grænser. For søgemaskinerobotter og tjenester, der viser forhåndsvisninger af links på sociale medier, vil du sende den komplette HTML uden streaming. Kontrollér, om forespørgslen kommer fra en bot, og kald pipe(res) i onAllReady i stedet for onShellReady.

onError udløses ved fejl i Suspense-grænser — React kan stadig streame resten af siden, mens den pågældende grænse viser sin fejlvisning. Brug onError til at logge fejlen i din overvågningspipeline uden at afbryde streamingen for brugeren.

renderToPipeableStream er React 18's primitive funktion til streamingbaseret SSR på Node.js-servere. Den streamer HTML-skallen med det samme via onShellReady, udfylder Suspense-grænser, efterhånden som data bliver klar, og hydrerer klienten via bootstrapScripts. Brug onAllReady til botter og crawlere, onShellError ved fatale fejl, og sæt altid HTTP-headere, før du kalder pipe().