So funktioniert React SSR unter der Haube
Verfolgen Sie den Ablauf von renderToString/renderToPipeableStream und verstehen Sie, wie der Client die Hydration übernimmt.
So funktioniert React SSR unter der Haube ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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, das SSR löst
Clientseitiges React benötigt JavaScript zum Rendern. Benutzer sehen eine leere Seite, bis JavaScript geladen und ausgeführt wurde. SSR rendert HTML auf dem Server vor, sodass Benutzer Inhalte sofort sehen. Das verbessert die wahrgenommene Performance und die SEO.
renderToString
Die ursprüngliche SSR-API: renderToString(<App />) rendert den Komponentenbaum synchron auf dem Server in einen HTML-String.
import { renderToString } from 'react-dom/server';
import App from './App';
// In an Express handler:
app.get('*', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html><body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body></html>
`);
});Hydration auf dem Client
Nachdem das HTML eingetroffen ist, analysiert der Browser es und rendert die Benutzeroberfläche. Anschließend fügt Reacts hydrateRoot() Event-Listener hinzu und macht das statische HTML interaktiv – dieser Vorgang heißt Hydration.
// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root'), <App />);Was während der Hydration geschieht
React durchläuft gleichzeitig das vom Server gerenderte DOM und das virtuelle DOM. Stimmen sie überein, fügt React Listener hinzu, ohne das DOM zu verändern. Unterscheiden sie sich, protokolliert React eine Hydration-Warnung und korrigiert das DOM.
renderToPipeableStream
Die Streaming-API von React 18 sendet HTML in Blöcken, sobald Daten verfügbar sind. Dadurch kann der Browser Inhalte schrittweise darstellen, während der Server noch verarbeitet.
import { renderToPipeableStream } from 'react-dom/server';
app.get('*', (req, res) => {
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res); // starts streaming
},
});
});Suspense und Streaming
Beim Streaming von SSR streamen Suspense-Grenzen zuerst den Fallback und ersetzen ihn anschließend durch den Inhalt, sobald die Daten verfügbar sind – ohne den anfänglichen HTML-Flush zu blockieren.
// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
return (
<Layout>
<Suspense fallback={<Skeleton />}>
<UserProfile /> {/* streams after data loads */}
</Suspense>
</Layout>
);
}Datenserialisierung
Auf dem Server abgerufene Daten müssen serialisiert und in das HTML eingebettet werden, damit der Client sie während der Hydration lesen kann, ohne sie erneut abzurufen.
// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');
// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`
// Client hydration reads:
const data = window.__INITIAL_DATA__;Unterschiede zwischen Umgebungen
Servercode läuft in Node.js, nicht in einem Browser. Code, der auf window, document oder localStorage verweist, verursacht auf dem Server einen Fehler. Sichern Sie solchen Code mit typeof window !== 'undefined' ab.
const isBrowser = typeof window !== 'undefined';
function getTheme() {
if (!isBrowser) return 'light'; // server-safe default
return localStorage.getItem('theme') ?? 'light';
}React Server Components vs. SSR
SSR rendert Komponenten bei jeder Anfrage in HTML. React Server Components (RSC) funktionieren anders – ihr JavaScript wird nie an den Client übertragen und sie können asynchron sein. RSC erfordern jedoch einen Bundler, der das RSC-Protokoll unterstützt (Next.js usw.).
Performancevorteile von Streaming
Streaming-SSR verbessert die Time To First Byte (TTFB) für den Shell und ermöglicht selektive Hydration – der Browser kann interaktive Islands hydratisieren, bevor das vollständige Seiten-HTML fertig gestreamt wurde.
Schnelltest
Was macht Reacts hydrateRoot() anders als createRoot(), wenn das Server-HTML bereits vorhanden ist?
Zusammenfassung
SSR verwendet renderToPipeableStream, um HTML vor dem Laden von JavaScript zu senden. Der Client ruft hydrateRoot() auf, um Event-Listener an das Server-HTML anzuhängen. Streaming-SSR mit Suspense sendet zuerst den Shell und füllt Inhalte asynchron ein. Sichern Sie Browser-APIs mit typeof window !== 'undefined' ab.
Häufig gestellte Fragen
Ist die Lektion „So funktioniert React SSR unter der Haube“ kostenlos?
Ja — der vollständige Text von „So funktioniert React SSR unter der Haube“ 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 „So funktioniert React SSR unter der Haube“?
Verfolgen Sie den Ablauf von renderToString/renderToPipeableStream und verstehen Sie, wie der Client die Hydration übernimmt. 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 1 von 4.
Wie lange dauert die Lektion „So funktioniert React SSR unter der Haube“?
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