Selektive Hydration und Streaming-HTML
Verwenden Sie Suspense-Grenzen, um HTML-Abschnitte zu streamen und interaktive Inseln zuerst zu hydratisieren.
Selektive Hydration und Streaming-HTML ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem mit der ganzseitigen Hydration
Traditionelles SSR hydratisiert die gesamte Seite auf einmal. Wenn ein Teil der Seite umfangreiches JavaScript enthält (z. B. eine Karte oder ein Diagramm), blockiert dieses die Hydration des restlichen Inhalts – einschließlich einfacher interaktiver Schaltflächen.
Streaming von HTML mit renderToPipeableStream
Die Streaming-API von React 18 sendet HTML in Blöcken. Der Seiten-Shell trifft sofort ein; Suspense-Grenzen füllen Inhalte ein, sobald diese verfügbar sind. So sehen Benutzer die Benutzeroberfläche, bevor alle Daten bereitstehen.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});Wie Streaming in der Praxis funktioniert
React rendert Komponenten, die nicht sofort pausieren (den Shell). Sobald die Daten einer Suspense-Grenze verfügbar sind, sendet React einen HTML-Block, der sie füllt, sowie ein Script-Tag, das den Browser anweist, wo er ihn einfügen soll.
Selektive Hydration
Beim Streaming kann React 18 Komponenten unabhängig voneinander hydratisieren. Klickt ein Benutzer auf ein Element, das noch nicht hydratisiert wurde, priorisiert React zuerst die Hydration dieser Komponente und fährt anschließend mit dem Rest fort.
Suspense-Grenzen als Streaming-Einheiten
Jede <Suspense>-Grenze ist eine Streaming-Einheit. Der Fallback wird sofort gesendet; der eigentliche Inhalt wird später gestreamt. Verschachteln Sie Suspense-Grenzen, um mit der richtigen Granularität zu streamen.
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>
);
}Next.js-Streaming mit loading.tsx
Im Next.js App Router ist loading.tsx der Suspense-Fallback. Das Seiten-Grundgerüst (Layout) wird zuerst gestreamt; der Seiteninhalt wird gestreamt, sobald die asynchrone Funktion aufgelöst wird.
// 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} />;
}Client Components innerhalb von Suspense
Server Components verwenden Suspense für Daten-Streaming. Client Components verwenden Suspense für Lazy Loading. Beide profitieren von selektiver Hydration.
// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}Prioritätsbasierte Hydration
Wenn der Benutzer mit einer noch nicht hydrierten Komponente interagiert (z. B. durch einen Klick), hydriert React 18 diese Komponente zuerst synchron, bevor die Hydration der anderen Teile der Seite abgeschlossen wird.
onShellReady vs onAllReady
onShellReady wird ausgelöst, sobald das Shell (die nicht ausgesetzten Teile) zum Streamen bereit ist. onAllReady wird ausgelöst, sobald alles gerendert ist – nützlich für die statische Generierung oder wenn Sie das vollständige HTML auf einmal senden müssen.
// For streaming (progressive rendering):
onShellReady() { pipe(res); }
// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }AbortController
Übergeben Sie ein AbortController-Signal, um SSR bei langsamen Render-Vorgängen abzubrechen (z. B. wenn das Zeitlimit überschritten wurde).
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
const { pipe } = renderToPipeableStream(<App />, {
signal: controller.signal,
onShellReady() { pipe(res); },
});
clearTimeout(timeoutId);Auswirkungen des Streamings messen
Verwenden Sie Lighthouse oder WebPageTest, um die Time To First Byte (TTFB) und Largest Contentful Paint (LCP) vor und nach der Aktivierung des Streamings zu messen und die Verbesserung zu quantifizieren.
Kurzer Test
Was geschieht bei der selektiven Hydration in React 18, wenn ein Benutzer auf ein Element klickt, das noch nicht hydriert wurde?
Zusammenfassung
Streaming-SSR verwendet renderToPipeableStream und Suspense-Grenzen, um HTML schrittweise zu senden. Jede Suspense-Grenze wird unabhängig gestreamt. Die selektive Hydration priorisiert Elemente, mit denen der Benutzer interagiert hat. In Next.js ist loading.tsx der automatische Suspense-Fallback für Streaming auf Seitenebene.
Häufig gestellte Fragen
Ist die Lektion „Selektive Hydration und Streaming-HTML“ kostenlos?
Ja — der vollständige Text von „Selektive Hydration und Streaming-HTML“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Selektive Hydration und Streaming-HTML“?
Verwenden Sie Suspense-Grenzen, um HTML-Abschnitte zu streamen und interaktive Inseln zuerst zu hydratisieren. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Selektive Hydration und Streaming-HTML“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- So funktioniert React SSR unter der Haube
- Hydration-Fehler: Ursachen und Lösungen
- Selektive Hydration und Streaming-HTML
- Islands-Architecture-Pattern