Progresywna hydratacja z selektywną hydratacją

Hydratacja selektywna to funkcja React 18, która pozwala Reactowi rozpocząć hydratację komponentów, gdy tylko dotrze ich kod JavaScript, bez oczekiwania na pobranie kodu JavaScript całej strony. Każda niezależnie wydzielona sekcja przechodzi hydratację w momencie załadowania swojego pakietu, a nie wszystkie sekcje jednocześnie.

Przed React 18 hydratacja działała na zasadzie „wszystko albo nic” — React musiał pobrać cały kod JavaScript i przeprowadzić hydratację całego drzewa, zanim jakakolwiek część strony stała się interaktywna. React 18 znosi to ograniczenie: fragmenty drzewa przechodzą hydratację niezależnie, gdy ich kod i dane stają się dostępne.

Jeśli użytkownik kliknie granicę Suspense, nad którą jeszcze nie zakończyła się hydratacja, lub wejdzie z nią w interakcję, React natychmiast nada priorytet hydratacji tego poddrzewa przed wykonaniem jakiejkolwiek innej oczekującej pracy związanej z hydratacją. Oznacza to, że element, z którego użytkownik próbuje skorzystać, stanie się interaktywny jako pierwszy, nawet jeśli nie znajduje się na początku dokumentu.

Połączenie React.lazy z importami dynamicznymi i granicami Suspense umożliwia selektywną hydratację komponentów wydzielonych w ramach dzielenia kodu. Przeglądarka najpierw pobiera główny pakiet JavaScript i natychmiast przeprowadza hydratację powłoki. Każdy komponent ładowany leniwie przechodzi hydratację po pobraniu swojego chunka — stopniowo, w miarę pobierania kolejnych chunków przez przeglądarkę.

W rezultacie treść widoczna bez przewijania staje się interaktywna, zanim kod JavaScript znajdujący się poniżej pierwszego widoku zostanie w ogóle pobrany. Użytkownik może korzystać z nawigacji i głównego CTA, podczas gdy kanał komentarzy i widget rekomendacji nadal pobierają swoje chunki JavaScript.

Selektywna hydratacja zmniejsza Total Blocking Time (TBT), czyli całkowity czas blokowania — kluczową metrykę wydajności hydratacji. Na karcie Performance w Chrome DevTools długie zadania (Long Tasks, trwające ponad 50 ms) są wyróżnione na czerwono. Przed wprowadzeniem selektywnej hydratacji można zobaczyć jedno długie zadanie trwające 300 ms, związane z pełną hydratacją; po jej wprowadzeniu widać kilka mniejszych zadań rozłożonych w czasie.

Antywzorzec podważający skuteczność selektywnej hydratacji polega na importowaniu wszystkich komponentów na początku aplikacji: import Footer from './Footer'. Zmusza to przeglądarkę do pobrania, przeanalizowania i wykonania kodu Footer, zanim rozpocznie się jakakolwiek hydratacja. Należy zastąpić importy komponentów znajdujących się poniżej pierwszego widoku, umieszczone na poziomie głównym, konstrukcją React.lazy + importami dynamicznymi.

W przypadku komponentów wyświetlanych poniżej początkowego obszaru widoku należy użyć const Footer = React.lazy(() => import('./Footer')). Należy opakować je w Suspense z prostym fallbackiem. Przeglądarka obniży priorytet pobierania pakietu Footer do czasu zakończenia hydratacji treści widocznej bez przewijania, co w naturalny sposób poprawi TBT.

Strumieniowanie i selektywna hydratacja uzupełniają się: strumieniowanie wysyła fragmenty HTML, aby poprawić FCP i LCP, natomiast selektywna hydratacja przetwarza fragmenty JavaScriptu, aby poprawić TTI i TBT. Razem odpowiadają zarówno za szybkie wyświetlenie treści, jak i za szybkie zapewnienie interaktywności.

React Server Components posuwają selektywną hydratację jeszcze dalej: komponenty serwerowe nie generują w ogóle kodu JavaScript dla klienta. Hydratacji wymagają tylko komponenty klienckie oznaczone ciągiem "use client". Zmniejsza to całkowitą ilość kodu JavaScript wymagającego hydratacji, dzięki czemu selektywna hydratacja staje się jeszcze skuteczniejsza.

Praktyczny wzorzec polega na użyciu renderToPipeableStream do strumieniowania HTML, objęciu strony głównym wywołaniem hydrateRoot zamiast createRoot w celu włączenia trybu hydratacji, użyciu React.lazy dla wszystkich sekcji znajdujących się poniżej pierwszego widoku oraz opakowaniu każdej sekcji w granicę Suspense. React zajmie się resztą automatycznie.

Jak interakcja użytkownika wpływa na priorytet selektywnej hydratacji w React 18?

Selektywna hydratacja pozwala Reactowi stopniowo przeprowadzać hydratację poddrzew komponentów w miarę docierania ich kodu JavaScript, zamiast czekać na pobranie całego pakietu. Interakcje użytkownika nadają priorytet hydratacji wskazanego poddrzewa. React.lazy + importy dynamiczne dla treści znajdujących się poniżej pierwszego widoku, połączone z granicami Suspense, umożliwiają ten stopniowy model. Selektywna hydratacja i strumieniowe SSR to uzupełniające się techniki, które razem poprawiają zarówno dostarczanie treści, jak i wydajność interaktywności.