Suspense-grenser og prioritet ved strømming

Suspense-grenser er den grunnleggende enheten for strømmingsgranularitet. Hver Suspense-grense i komponenttreet oppretter en seksjon som kan strømmes uavhengig – React kan løse og strømme hver grense i sitt eget tempo, uavhengig av alle andre.

Skallet består av alt utenfor Suspense-grenser – layouten, navigasjonen, bunnteksten og alt innhold som er tilgjengelig synkront. Skallet strømmes først og raskt, slik at brukerne får sidens struktur umiddelbart mens dataavhengige seksjoner lastes inn i bakgrunnen.

Når React strømmer skallet, gjengis alle Suspense-grenser som ennå ikke har fått data, med sitt fallback-grensesnitt – vanligvis en lasteskjelettvisning eller en spinner. Dette fallback-innholdet inkluderes i den første HTML-responsen, slik at brukeren ser en lasteindikator umiddelbart i stedet for et tomt område.

Når dataene i en Suspense-grense blir klare, strømmer React den ferdige HTML-en sammen med et lite innebygd skript. Skriptet flytter det nylig strømmede innholdet fra et skjult template-element til riktig plassering i DOM-en, og erstatter fallback-innholdet uten å laste inn siden på nytt.

React bruker mønsteret med HTML-elementet template: Ferdig Suspense-innhold strømmes inn i en skjult template, og deretter kaller et skript en intern React-funksjon for å flytte innholdet fra templaten til riktig plassering i DOM-en. Dette muliggjør DOM-manipulering for utskiftingen uten behov for et JavaScript-rammeverk.

Nestede Suspense-grenser har uavhengige tidslinjer for når de blir klare. En indre Suspense-grense kan bli klar før den ytre grensen – React strømmer det indre innholdet så snart det er klart, uavhengig av om den ytre grensen er ferdig. Dette maksimerer parallelliteten i datalastingen.

En effektiv plassering av Suspense innebærer å legge trege, dataavhengige komponenter inne i Suspense-grenser og raskt, statisk eller synkront tilgjengelig innhold utenfor. Navigasjonsfelt, hero-seksjoner med statisk tekst og bunntekster bør ligge utenfor. Produktlister, brukerdashbord og kommentarstrømmer bør ligge innenfor.

React strømmer Suspense-grenser etter hvert som de blir klare – ikke nødvendigvis i den rekkefølgen de vises i dokumentet. En seksjon under folden kan bli klar før en seksjon over folden hvis den krever mindre data. React håndterer innsettingen i DOM-en riktig uavhengig av strømmingsrekkefølgen.

React 18s selektive hydrering reagerer på brukerinteraksjon: Hvis brukeren klikker på eller holder markøren over en Suspense-grense som ennå ikke er hydrert, prioriterer React hydrering av denne grensen. Dermed oppleves brukerinteraksjoner som responsive selv om andre deler av siden fortsatt hydreres.

Flere Suspense-grenser gir større fleksibilitet ved strømming, men for mange grenser medfører ekstra kostnader på grunn av innebygde skript for utskifting. En praktisk tommelfingerregel er å omgi hele «seksjoner» (innhold over folden, sidestolpe og strømmen under folden) i stedet for enkeltkomponenter. Én til tre Suspense-grenser per side er ofte et godt kompromiss.

I Network-fanen i Chrome DevTools kan du bruke «Preserve log» og følge med på responsen mens den strømmes: HTML-dokumentet vokser i deler. Performance-fanen viser markører for FCP og LCP – sammenlign strømmende og ikke-strømmende bygg for å måle forbedringen. Begrens hastigheten til Fast 3G for å gjøre effekten tydeligere.

Suspense-grenser deler React-treet inn i seksjoner som kan strømmes uavhengig. Skallet (utenfor Suspense) strømmes først; fallback-innhold vises umiddelbart for grenser som fortsatt behandles; og ferdig innhold erstatter fallback-innholdet via innebygde skript. Nestede grenser har uavhengige tidslinjer. Plasser grenser på seksjonsnivå for optimal strømmingsgranularitet, og la Reacts prioritetssystem håndtere rekkefølgen på hydrering som utløses av interaksjon.