Granice Suspense i priorytet strumieniowania

Granice Suspense są podstawową jednostką podziału strumieniowania. Każda granica Suspense w drzewie komponentów tworzy niezależnie strumieniowaną sekcję — React może rozwiązywać i strumieniować każdą granicę we własnym tempie, niezależnie od pozostałych.

Powłoka obejmuje wszystko, co znajduje się poza granicami Suspense — układ strony, nawigację, stopkę i wszelką treść dostępną synchronicznie. Powłoka jest strumieniowana jako pierwsza i bardzo szybko, dzięki czemu użytkownik od razu otrzymuje strukturę strony, podczas gdy sekcje zależne od danych są ładowane w tle.

Podczas strumieniowania powłoki przez React każda granica Suspense, której dane nie są jeszcze dostępne, jest renderowana jako jej fallback — zazwyczaj szkielet ładowania lub wskaźnik. Ten fallback jest zawarty w początkowej odpowiedzi HTML, więc użytkownik od razu widzi wskaźnik ładowania zamiast pustego miejsca.

Gdy dane granicy Suspense zostaną rozwiązane, React strumieniuje wyrenderowany kod HTML wraz z krótkim skryptem wbudowanym w dokument. Skrypt ten przenosi nowo przesłaną treść z ukrytego elementu template na właściwe miejsce w DOM, zastępując fallback bez pełnego przeładowania strony.

React korzysta ze wzorca z elementem HTML template: rozwiązana treść Suspense jest strumieniowana do ukrytego elementu template, a następnie skrypt wywołuje wewnętrzną funkcję Reacta, aby przenieść zawartość elementu template na właściwe miejsce w DOM. Umożliwia to wymianę zawartości DOM bez używania frameworka JavaScript.

Zagnieżdżone granice Suspense mają niezależne osie czasu rozwiązywania. Wewnętrzna granica Suspense może zostać rozwiązana przed granicą zewnętrzną — React strumieniuje jej zawartość, gdy tylko jest gotowa, niezależnie od tego, czy granica zewnętrzna została już rozwiązana. Maksymalizuje to równoległość ładowania danych.

Skuteczne rozmieszczenie Suspense polega na umieszczaniu wolnych komponentów zależnych od danych wewnątrz granic Suspense, a szybkiej, statycznej lub dostępnej synchronicznie treści na zewnątrz. Paski nawigacji, sekcje hero ze statycznym tekstem i stopki powinny znajdować się na zewnątrz. Listy produktów, panele użytkownika i kanały komentarzy powinny znajdować się wewnątrz.

React strumieniuje granice Suspense w miarę ich rozwiązywania — niekoniecznie w kolejności, w której pojawiają się w dokumencie. Sekcja znajdująca się niżej na stronie może zostać rozwiązana przed sekcją widoczną bez przewijania, jeśli wymaga mniejszej ilości danych. React prawidłowo obsługuje wstawianie do DOM niezależnie od kolejności strumieniowania.

Selektywna hydratacja w React 18 reaguje na interakcje użytkownika: jeśli użytkownik kliknie granicę Suspense, nad którą jeszcze nie zakończyła się hydratacja, lub najedzie na nią kursorem, React w pierwszej kolejności nada priorytet hydratacji tej granicy. Dzięki temu interakcje użytkownika pozostają responsywne, nawet gdy inne części strony nadal przechodzą hydratację.

Większa liczba granic Suspense zapewnia większą elastyczność strumieniowania, ale zbyt wiele granic zwiększa narzut związany z wbudowanymi skryptami zastępującymi treść. Praktyczna zasada mówi, aby obejmować granicami całe „sekcje” (treść widoczną bez przewijania, pasek boczny, kanał poniżej pierwszego widoku), a nie pojedyncze komponenty. Od jednej do trzech granic Suspense na stronę to często optymalny kompromis.

Na karcie Network w Chrome DevTools włącz „Preserve log” i obserwuj strumieniowanie odpowiedzi: dokument HTML jest odbierany w kolejnych fragmentach. Karta Performance pokazuje znaczniki FCP i LCP — porównaj wersje ze strumieniowaniem i bez niego, aby zmierzyć poprawę. Ustaw ograniczenie Fast 3G, aby wyraźniej zobaczyć ten efekt.

Granice Suspense dzielą drzewo Reacta na niezależnie strumieniowane sekcje. Powłoka (znajdująca się poza Suspense) jest strumieniowana jako pierwsza; fallbacki pojawiają się natychmiast dla granic oczekujących na dane; rozwiązana treść zastępuje fallbacki za pomocą wbudowanych skryptów. Zagnieżdżone granice mają niezależne osie czasu. Aby uzyskać optymalną ziarnistość strumieniowania, należy umieszczać granice na poziomie sekcji i pozwolić systemowi priorytetów Reacta obsługiwać kolejność hydratacji wynikającą z interakcji.