Selektywna hydratacja i strumieniowanie HTML
Używanie granic Suspense do strumieniowania fragmentów HTML i hydratowania interaktywnych wysp w pierwszej kolejności.
Selektywna hydratacja i strumieniowanie HTML to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Problem z hydratacją całej strony
Tradycyjne SSR przeprowadza hydratację całej strony jednocześnie. Jeśli jedna część strony zawiera dużo kodu JavaScript (np. mapę lub wykres), blokuje hydratację pozostałej części — w tym prostych interaktywnych przycisków.
Strumieniowanie HTML za pomocą renderToPipeableStream
API strumieniowania w React 18 wysyła HTML we fragmentach. Szkielet strony dociera natychmiast, a granice Suspense uzupełniają zawartość po jej przygotowaniu — użytkownicy widzą interfejs, zanim wszystkie dane będą gotowe.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});Jak strumieniowanie działa w praktyce
React natychmiast renderuje komponenty, które nie wstrzymują renderowania (szkielet strony). Gdy dane granicy Suspense zostaną przygotowane, React wysyła fragment HTML uzupełniający tę granicę oraz znacznik script informujący przeglądarkę, gdzie go umieścić.
Selektywna hydratacja
Podczas strumieniowania React 18 może przeprowadzać hydratację komponentów niezależnie. Jeśli użytkownik kliknie element, który nie został jeszcze poddany hydratacji, React najpierw nada priorytet hydratacji tego komponentu, a następnie będzie kontynuować pracę nad resztą.
Granice Suspense jako jednostki strumieniowania
Każda granica <Suspense> jest jednostką strumieniowania. Fallback jest wysyłany natychmiast, a właściwa zawartość jest strumieniowana później. Zagnieżdżaj granice Suspense, aby strumieniować zawartość z odpowiednią szczegółowością.
function App() {
return (
<Layout>
{/* Streams first — no data needed */}
<Header />
<Suspense fallback={<ArticleSkeleton />}>
{/* Streams when article data resolves */}
<Article />
</Suspense>
<Suspense fallback={<CommentsSkeleton />}>
{/* Streams independently from Article */}
<Comments />
</Suspense>
</Layout>
);
}Strumieniowanie w Next.js z użyciem loading.tsx
W Next.js App Router plik loading.tsx jest fallbackiem Suspense. Szkielet strony (layout) jest strumieniowany jako pierwszy, a zawartość strony — gdy odpowiadająca jej funkcja async zwróci wynik.
// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
return <ArticleSkeleton />;
}
// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
const posts = await fetchPosts(); // data fetch happens server-side
return <PostList posts={posts} />;
}Komponenty klienckie wewnątrz Suspense
Komponenty serwerowe używają Suspense do strumieniowania danych. Komponenty klienckie używają Suspense do leniwego ładowania. Oba rodzaje korzystają z selektywnej hydratacji.
// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}Hydratacja według priorytetu
Jeśli użytkownik wejdzie w interakcję z komponentem, który nie został jeszcze poddany hydratacji (np. klikając), React 18 natychmiast, synchronicznie poddaje hydratacji ten komponent, zanim zakończy hydratację innych części strony.
onShellReady a onAllReady
onShellReady jest wywoływane, gdy szkielet (części, które nie są zawieszone) jest gotowy do strumieniowania. onAllReady jest wywoływane, gdy wszystko zostanie wyrenderowane — przydaje się podczas generowania statycznego lub gdy trzeba wysłać cały HTML jednocześnie.
// For streaming (progressive rendering):
onShellReady() { pipe(res); }
// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }Abort Controller
Przekaż sygnał AbortController, aby anulować SSR w przypadku powolnego renderowania (np. po przekroczeniu limitu czasu).
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
const { pipe } = renderToPipeableStream(<App />, {
signal: controller.signal,
onShellReady() { pipe(res); },
});
clearTimeout(timeoutId);Pomiar wpływu strumieniowania
Użyj Lighthouse lub WebPageTest, aby zmierzyć czas do pierwszego bajtu (TTFB) i największe wyrenderowanie treści (LCP) przed włączeniem strumieniowania i po nim, a następnie ilościowo ocenić poprawę.
Szybki sprawdzian
Co dzieje się podczas selektywnej hydratacji w React 18, gdy użytkownik kliknie element, który nie został jeszcze poddany hydratacji?
Podsumowanie
Strumieniowanie SSR używa renderToPipeableStream i granic Suspense do stopniowego wysyłania HTML. Każda granica Suspense jest strumieniowana niezależnie. Selektywna hydratacja nadaje priorytet elementom, z którymi użytkownik wszedł w interakcję. W Next.js loading.tsx jest automatycznym fallbackiem Suspense dla strumieniowania na poziomie strony.
Często zadawane pytania
Czy lekcja „Selektywna hydratacja i strumieniowanie HTML” jest bezpłatna?
Tak — pełny tekst „Selektywna hydratacja i strumieniowanie HTML” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Selektywna hydratacja i strumieniowanie HTML”?
Używanie granic Suspense do strumieniowania fragmentów HTML i hydratowania interaktywnych wysp w pierwszej kolejności. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Selektywna hydratacja i strumieniowanie HTML”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Jak działa React SSR od środka
- Błędy hydratacji: przyczyny i rozwiązania
- Selektywna hydratacja i strumieniowanie HTML
- Wzorzec architektury wysp