# Hydration

Kategorie: [Rendering & JavaScript](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/) › [Rendering-Verfahren](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/rendering-verfahren/) · Auch genannt: Rehydration

**Hydration** bezeichnet in der Webentwicklung den Schritt, in dem JavaScript im Browser serverseitig gerendertes HTML interaktiv macht, indem es Event-Handler an die vorhandenen DOM-Elemente hängt. Der Begriff meint hier die Webtechnik, die Suche liefert auch Treffer zum Flüssigkeitshaushalt.

## Wie funktioniert Hydration?

Der Server liefert fertiges HTML aus, das Seitenelemente sofort anzeigt. Danach lädt der Browser das JavaScript, und das Framework verbindet sich mit dem vorhandenen HTML. React beschreibt das mit `hydrateRoot`. Beispiele und Funktionsnamen stammen hier aus React, andere Frameworks verwenden den Begriff mit eigenen Schnittstellen. Bis dahin sieht die Seite fertig aus, reagiert aber noch nicht auf Eingaben.

Der im Browser erzeugte React-Baum muss exakt der Ausgabe des Servers entsprechen. Abweichungen, etwa durch Abfragen von `window` oder unterschiedliche Daten auf Server und Client, gelten laut React als Fehler, die behoben werden sollten. Sie können zu Verlangsamungen und zu Event-Handlern an falschen Elementen führen.

## Bedeutung für SEO

Enthält das serverseitige HTML die Inhalte, sehen auch Crawler ohne JavaScript-Ausführung Texte und Links. Google nennt Hydration neben Server-Side Rendering und statischem Rendering als Alternative zu Dynamic Rendering. DebugBear beschreibt, dass Hydration den Hauptthread blockieren und den INP verschlechtern kann und dass große eingebettete Datenstrukturen das HTML-Dokument vergrößern.

## Beispiel

```javascript
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);
```

Das Element `root` enthält bereits das vom Server gerenderte HTML. React ergänzt nur die Interaktivität.

*Grafik: Wo das HTML entsteht: CSR, SSR, SSG.* Entscheidend für Crawler ist, ob der Inhalt schon in der ersten HTML-Antwort steht. Google empfiehlt Server-Side Rendering oder Prerendering; Dynamic Rendering bezeichnet Google als Workaround, keine Dauerlösung.

## Verwandte Begriffe

- [Server-Side Rendering (SSR)](https://seo-geo-glossary.com/de/glossar/server-side-rendering/index.md)
- [Client-Side Rendering (CSR)](https://seo-geo-glossary.com/de/glossar/client-side-rendering/index.md)
- [Rendering](https://seo-geo-glossary.com/de/glossar/rendering/index.md)
- [JavaScript-SEO](https://seo-geo-glossary.com/de/glossar/javascript-seo/index.md)
- [Interaction to Next Paint (INP)](https://seo-geo-glossary.com/de/glossar/interaction-to-next-paint/index.md)
- [Static Site Generation (SSG)](https://seo-geo-glossary.com/de/glossar/static-site-generation/index.md)
- [Gerendertes HTML](https://seo-geo-glossary.com/de/glossar/gerendertes-html/index.md)
- [DOM](https://seo-geo-glossary.com/de/glossar/dom/index.md)

## Quellen

- [hydrateRoot – React Docs](https://react.dev/reference/react-dom/client/hydrateRoot)
- [Dynamic Rendering als Behelfslösung – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering)
- [Hydration (web development) – Wikipedia](https://en.wikipedia.org/wiki/Hydration_(web_development))
- [What Is JavaScript Hydration For Single Page Applications? – DebugBear](https://www.debugbear.com/blog/javascript-hydration)

---

Stand: 8. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/hydration/