Suoratoistettava SSR edgestä

Kun palvelin suoratoistaa HTML:ää, selain vastaanottaa ja renderöi sisällön osissa sen sijaan, että se odottaisi koko dokumenttia. Käyttäjät näkevät sivun näkyvät osat ja voivat käyttää niitä — esimerkiksi otsaketta, navigaatiota ja hero-osiota — samalla kun hitaammin latautuvat, tiedoista riippuvat osiot ovat vielä latautumassa.

bootstrapScripts-parametrin välittäminen renderToReadableStream-funktiolle kertoo Reactille, missä asiakaspuolen JS-bundle sijaitsee. React lisää streamin loppuun script-tagin, jotta selain lataa bundlen ja kutsuu hydrateRoot-funktiota. Näin sivusta tulee vuorovaikutteinen sitä mukaa kuin kukin osio suoratoistetaan valmiiksi.

Reactin suoratoisto perustuu Suspense-rajoihin, jotka jakavat komponenttipuun itsenäisesti suoratoistettaviin osioihin. Suspense-rajan sisällä olevat komponentit, jotka odottavat tietoja heitetyn Promisen vuoksi, suoratoistetaan ensin paikkamerkkeinä, minkä jälkeen ne valmistuvat ja niiden varsinainen sisältö suoratoistetaan myöhemmin.

onShellReady-callback suoritetaan, kun suoratoistoon valmis HTML-kuori — kaikki Suspense-rajojen ulkopuolinen sisältö — on valmis. Tämä on oikea hetki asettaa HTTP-tilakoodi ja vastauksen otsakkeet sekä kutsua pipe(res)-funktiota tai aloittaa ReadableStreamin lukeminen.

HTTP-tilakoodit ja otsakkeet on lähetettävä ennen vastauksen rungon aloittamista. Koska suoratoisto alkaa onShellReady-tapahtumassa, kaiken virheenkäsittelylogiikan (tilakoodin 500 asettamisen ja uudelleenohjauksen) tulee tapahtua ennen kuoren virtaamisen alkamista. Kun suoratoisto on alkanut, tilakoodi on lukittu.

onShellError suoritetaan, kun kriittinen virhe tapahtuu ennen kuoren valmistumista, esimerkiksi ylätason komponentissa, joka ei kuulu mihinkään Suspense-rajaan. Tällöin kuorta ei koskaan suoratoisteta, ja vastaukseksi tulee palauttaa staattinen virhesivu tai uudelleenohjata virhereitille.

onError suoritetaan Suspense-rajojen sisällä tapahtuvien palautuvien virheiden yhteydessä. React pystyy silti suoratoistamaan sivun muun sisällön, ja virheen kohdannut raja renderöi virheen varalla olevan käyttöliittymän. Käyttäkää onError-tapahtumaa lokitukseen: tallentakaa virhe observability-alustallenne keskeyttämättä streamia.

Jos Suspense-rajauksen tietojen saaminen kestää liian kauan, streamatkaa shell silti ja antakaa rajauksen hydratoitua client-puolella. Toteuttakaa aikakatkaisu: kutsukaa viiden sekunnin kuluttua streamin abort()-funktiota, jos rajaus ei ole valmistunut, jolloin client hakee tiedot itse useEffectin avulla.

Workers-ajoaika välittää ReadableStreamin suoraan Response-vastauksen rungoksi. Cloudflaren infrastruktuuri välittää jokaisen palan käyttäjän selaimelle sitä mukaa kuin React tuottaa sen, eikä koko dokumenttia puskuroita. Tämän ansiosta HTML:n ensimmäiset tavut lähtevät reunaverkon PoP:sta millisekunneissa pyynnön saapumisesta.

renderToReadableStream palauttaa abort-ohjausfunktion. Jos pyyntö peruutetaan käyttäjän siirtyessä toiselle sivulle, abort()-funktion kutsuminen estää Reactia jatkamasta renderöintiä ja tietojen käsittelyä. Näin vältetään hylättyihin pyyntöihin kuluva turha laskenta ja pidetään Workerin suorittimen käyttö rajattuna.

Reunaverkon streamauksen yhteydessä koko viiveketju näyttää tältä: 5 ms (pyynnöstä lähimpään PoP:iin) + 2 ms (Workerin kylmäkäynnistys) + 8 ms (shellin renderöinti) = 15 ms ensimmäiseen tavuun. Käyttäjän selain renderöi LCP-elementin shellistä samalla, kun sivun loppuosa streamataan taustalla.

Reunaverkosta toteutettu streamaava SSR toimittaa HTML:n paloina ja parantaa FCP- ja LCP-tuloksia lähettämällä shellin heti. Suspense-rajaukset jakavat puun itsenäisesti streamattaviin osioihin. onShellReady on signaali streamin välittämisen aloittamiseen — asettakaa statuskoodit ennen sen kutsumista. onShellError käsittelee kohtalokkaat virheet, onError korjattavissa olevat virheet, ja abort() estää peruutettujen pyyntöjen turhan työn.