Suspense-rajat ja suoratoiston prioriteetti

Suspense-rajat ovat streamauksen hienojakoisuuden perusyksikkö. Jokainen komponenttipuun Suspense-raja muodostaa itsenäisesti streamattavan osion. React voi ratkaista ja streamata kunkin rajan omassa tahdissaan muista rajoista riippumatta.

Shell sisältää kaiken Suspense-rajojen ulkopuolisen sisällön: asettelun, navigoinnin, alatunnisteen ja kaiken synkronisesti saatavilla olevan sisällön. Shell streamataan ensin ja nopeasti, joten käyttäjä näkee sivun rakenteen heti samalla, kun dataa tarvitsevat osiot latautuvat taustalla.

Kun React streamaa shellin, jokainen Suspense-raja, jonka data ei ole vielä saatavilla, renderöidään fallback-näkymänä — yleensä latausskeletonina tai latausympyränä. Tämä fallback sisältyy alustavaan HTML-vastaukseen, joten käyttäjä näkee latausilmaisimen heti tyhjän tilan sijaan.

Kun Suspense-rajan data valmistuu, React streamaa ratkaistun HTML:n ja pienen upotetun komentosarjan. Komentosarja siirtää juuri streamatun sisällön piilotetusta template-elementistä DOM:n oikeaan kohtaan ja korvaa fallbackin ilman koko sivun uudelleenlatausta.

React käyttää HTML:n template-elementtiin perustuvaa mallia: ratkaistu Suspense-sisältö streamataan piilotettuun template-elementtiin, minkä jälkeen komentosarja kutsuu Reactin sisäistä funktiota siirtääkseen templatessa olevan sisällön DOM:n oikeaan kohtaan. Näin sisältö voidaan korvata suoraan DOM:ssa ilman JavaScript-kehystä.

Sisäkkäisillä Suspense-rajoilla on toisistaan riippumattomat valmistumisaikataulut. Sisempi Suspense-raja voi valmistua ennen ulompaa rajaa, jolloin React streamaa sisemmän sisällön heti sen valmistuttua riippumatta siitä, onko ulompi raja valmis. Tämä maksimoi datan lataamisen rinnakkaisuuden.

Tehokkaassa Suspense-sijoittelussa hitaat, dataa tarvitsevat komponentit sijoitetaan Suspense-rajojen sisään ja nopeat, staattiset tai synkronisesti saatavilla olevat komponentit niiden ulkopuolelle. Navigointipalkit, staattista tekstiä sisältävät hero-osiot ja alatunnisteet kuuluvat ulkopuolelle. Tuoteluettelot, käyttäjien hallintapaneelit ja kommenttisyötteet kuuluvat sisäpuolelle.

React streamaa Suspense-rajat niiden valmistuessa, ei välttämättä siinä järjestyksessä, jossa ne esiintyvät dokumentissa. Näkymän alapuolinen osio voi valmistua ennen näkymän yläosan osiota, jos se tarvitsee vähemmän dataa. React huolehtii DOM:iin lisäämisestä oikein streamausjärjestyksestä riippumatta.

React 18:n valikoiva hydraatio reagoi käyttäjän vuorovaikutukseen: jos käyttäjä napsauttaa Suspense-rajaa tai vie osoittimen sen päälle ennen rajalle tehtyä hydraatiota, React priorisoi kyseisen rajan hydraation. Näin käyttäjän vuorovaikutus tuntuu sujuvalta, vaikka sivun muiden osien hydraatio olisi vielä kesken.

Useammat Suspense-rajat tarjoavat enemmän joustavuutta streamaukseen, mutta liian monet rajat lisäävät upotettujen korvauskomentosarjojen aiheuttamaa kuormaa. Käytännöllinen ohje on rajata kokonaisia osioita — kuten näkymän yläosan sisältö, sivupalkki ja näkymän alapuolinen syöte — yksittäisten komponenttien sijaan. Yhdestä kolmeen Suspense-rajaa sivua kohden on yleinen hyvä kompromissi.

Avatkaa Chrome DevToolsin Network-välilehdellä "Preserve log" ja tarkkailkaa vastauksen streamausta: HTML-dokumentti kasvaa osissa. Performance-välilehti näyttää FCP- ja LCP-merkinnät. Verratkaa streamaavaa ja streamaamatonta koontiversiota parannuksen mittaamiseksi. Rajoittakaa yhteysnopeus Fast 3G -tasolle vaikutuksen korostamiseksi.

Suspense-rajat jakavat React-puun itsenäisesti streamattaviin osioihin. Shell eli Suspensen ulkopuolinen sisältö streamataan ensin, ja keskeneräisten rajojen fallbackit näkyvät heti. Valmis sisältö korvaa fallbackit upotettujen komentosarjojen avulla. Sisäkkäisillä rajoilla on itsenäiset aikajanat. Sijoittakaa rajat osiotasolle streamauksen optimaalisen hienojakoisuuden saavuttamiseksi ja antakaa Reactin prioriteettijärjestelmän hallita vuorovaikutuksen käynnistämää hydraatiojärjestystä.