Suspense-gränser och prioritet vid strömning

Suspense-gränser är den grundläggande enheten för streamingens granularitet. Varje Suspense-gräns i komponentträdet skapar ett avsnitt som kan streamas oberoende – React kan lösa upp och streama varje gräns i sin egen takt, oberoende av alla andra.

Skalet består av allt utanför Suspense-gränserna – layouten, navigeringen, sidfoten och allt innehåll som är tillgängligt synkront. Skalet streamas först och snabbt, så att användarna omedelbart får se sidans struktur medan databeroende avsnitt läses in i bakgrunden.

När React streamar skalet renderas alla Suspense-gränser vars data ännu inte är tillgängliga med sitt reservgränssnitt – vanligtvis ett laddningsskelett eller en spinner. Reservgränssnittet ingår i det ursprungliga HTML-svaret, så att användaren omedelbart ser en laddningsindikator i stället för ett tomt utrymme.

När data för en Suspense-gräns har lösts upp streamar React den färdiga HTML-koden tillsammans med ett litet inline-skript. Skriptet flyttar det nystreamade innehållet från ett dolt template-element till rätt plats i DOM-trädet och ersätter reservinnehållet utan att hela sidan behöver läsas in på nytt.

React använder mönstret med HTML-elementet template: det färdiga Suspense-innehållet streamas in i en dold template, och sedan anropar ett skript en intern React-funktion som byter ut template-innehållet mot rätt plats i DOM-trädet. Det möjliggör DOM-manipulering utan JavaScript-ramverk vid ersättningen.

Kapslade Suspense-gränser har oberoende tidslinjer för när de löses upp. En inre Suspense-gräns kan lösas upp före sin yttre gräns – React streamar det inre innehållet så snart det är klart, oavsett om den yttre gränsen har lösts upp. Det maximerar parallelliteten vid dataladdning.

En effektiv placering av Suspense innebär att långsamma, databeroende komponenter placeras inuti Suspense-gränser, medan snabbt, statiskt eller synkront tillgängligt innehåll placeras utanför. Navigeringsfält, hero-sektioner med statisk text och sidfötter hör hemma utanför. Produktlistor, användarpaneler och kommentarsflöden hör hemma inuti.

React streamar Suspense-gränser när de löses upp – inte nödvändigtvis i den ordning de förekommer i dokumentet. Ett avsnitt längre ned på sidan kan lösas upp före ett avsnitt högre upp om det kräver mindre data. React hanterar insättningen i DOM-trädet korrekt oavsett streamingordning.

React 18:s selektiva hydrering reagerar på användarinteraktion: om användaren klickar på eller håller pekaren över en Suspense-gräns som ännu inte har hydreras prioriterar React hydreringen av den gränsen. Det gör att användarinteraktioner känns responsiva även när andra delar av sidan fortfarande hydreras.

Fler Suspense-gränser ger större flexibilitet vid streaming, men för många gränser medför overhead från inline-skript för ersättning. En praktisk riktlinje är att omsluta hela "sektioner" (innehåll i den första viewporten, sidofält och flöden längre ned på sidan) i stället för enskilda komponenter. En till tre Suspense-gränser per sida är ofta en bra kompromiss.

Använd "Preserve log" på fliken Network i Chrome DevTools och observera hur svaret streamas: HTML-dokumentet växer i delar. På fliken Performance visas markörer för FCP och LCP – jämför streamingbyggen med byggen utan streaming för att kvantifiera förbättringen. Begränsa anslutningen till Fast 3G för att förstärka effekten.

Suspense-gränser delar upp React-trädet i avsnitt som kan streamas oberoende av varandra. Skalet (utanför Suspense) streamas först, reservinnehåll visas omedelbart för gränser som väntar och färdigt innehåll ersätter reservinnehållet via inline-skript. Kapslade gränser har oberoende tidslinjer. Placera gränser på sektionsnivå för optimal streaminggranularitet och låt Reacts prioritetssystem hantera ordningen för hydrering som utlöses av interaktioner.