--- title: "Hydration" title_en: "Hydration" description: "Hydration ist der Schritt, in dem der Browser vorgerendertes HTML mit JavaScript verbindet und interaktiv macht. Zu viel Hydration bedeutet schweres JavaScript, träge Reaktion (INP) und unnötigen Ballast." description_en: "Hydration is the step where the browser attaches JavaScript to pre-rendered HTML and makes it interactive. Too much hydration means heavy JavaScript, sluggish response (INP) and needless overhead." summary_en: "Hydration is the step where the browser attaches JavaScript to pre-rendered HTML and makes it interactive. Too much hydration means heavy JavaScript, sluggish response (INP) and needless overhead." direct_answer_en: "Hydration is the process in which a client-side framework such as React takes server-rendered HTML, attaches event handlers and state, and makes it interactive. It lets pages arrive as readable HTML, but hydrating more components than necessary costs JavaScript and main-thread time and hurts INP." url: "https://modern-stack.de/glossar/hydration" type: "glossary" kind: "glossary" language: de-DE updated_at: "2026-10-06T18:00:00+00:00" --- # Hydration ## English Abstract Hydration is the step where the browser attaches JavaScript to pre-rendered HTML and makes it interactive. Too much hydration means heavy JavaScript, sluggish response (INP) and needless overhead. ## Quick Answer (EN) Hydration is the process in which a client-side framework such as React takes server-rendered HTML, attaches event handlers and state, and makes it interactive. It lets pages arrive as readable HTML, but hydrating more components than necessary costs JavaScript and main-thread time and hurts INP. ## Key Takeaways (EN) - Hydration turns static server HTML into an interactive app in the browser. - It costs JavaScript download, parse and execution on the main thread. - Only hydrate components that need interaction; marketing text usually does not. - A pure client-rendered shell is not hydration — it ships empty HTML. ## English Summary With server-side rendering, the browser receives complete HTML first and a JavaScript framework such as React then hydrates it: it attaches event listeners and rebuilds component state without re-creating the DOM. Hydration enables interactivity but adds JavaScript work that can block the main thread and worsen Interaction to Next Paint. Modern approaches such as server components and partial hydration keep static text out of the client bundle. Modern Stack ships readable HTML and hydrates only interactive parts. ## Quick Answer **Hydration:** Hydration ist der Vorgang, bei dem ein Framework wie React servergerendertes HTML im Browser übernimmt, Event-Handler und Zustand anhängt und die Seite damit interaktiv macht. Die Seite erscheint schnell als lesbares HTML, doch jede hydrierte Komponente kostet JavaScript und Main-Thread-Zeit. Hydriere deshalb nur, was wirklich Interaktion braucht. > Zitierfähigkeit entsteht, wenn Definition, Struktur und klare nächste Schritte zusammenkommen. > Steve Baka ## Key Takeaways - Hydration macht aus fertigem Server-HTML eine interaktive Anwendung im Browser. - Der Preis: JavaScript laden, parsen und ausführen — das belastet den Main Thread und [INP](/glossar/inp). - Statischer Marketingtext braucht in der Regel keine Hydration. - Eine reine JS-Shell (leeres HTML) ist etwas anderes und schadet [Extrahierbarkeit](/glossar/extrahierbarkeit) und Crawling. ## Was ist Hydration? Wenn eine Webseite per [Server-Side Rendering](/glossar/ssr) oder [statischer Generierung](/glossar/ssg) erzeugt wird, schickt der Server fertiges HTML an den Browser. Besucher sehen Text und Layout sofort, aber Knöpfe, Menüs und Formulare reagieren noch nicht, weil die Programmlogik fehlt. **Hydration** schließt diese Lücke: Das JavaScript-Framework lädt, durchläuft das vorhandene HTML, ordnet es seinen Komponenten zu und hängt Event-Listener und Zustand an. Das DOM wird dabei nicht neu gebaut, sondern „befeuchtet“, daher der Name. React beschreibt das in der Dokumentation zu `hydrateRoot`: Die Funktion übernimmt HTML, das von React-DOM-Servermethoden erzeugt wurde, und macht es interaktiv. Wichtig ist, dass Server-HTML und Client-Rendering übereinstimmen; Abweichungen führen zu Hydration-Fehlern und zusätzlichem Aufwand. ## Warum kostet Hydration Performance? Hydration verlagert Arbeit in den Browser. Das Bundle muss geladen, geparst und ausgeführt werden, anschließend muss das Framework die Komponentenstruktur durchlaufen. Das geschieht im Main Thread, demselben Thread, der auch Klicks verarbeitet. Während dieser Zeit können Eingaben verzögert werden. Web.dev beschreibt in „Rendering on the Web“, dass SSR schnellen ersten Inhalt liefert, die Seite aber bis zur Hydration nicht reagiert, eine Phase, die sich wie eine „Uncanny Valley“ anfühlt: Es sieht fertig aus, ist aber noch nicht bedienbar. Das zeigt sich in [INP](/glossar/inp), dem Maß für die Reaktionsgeschwindigkeit. Je mehr Komponenten hydriert werden und je größer die Bundles, desto länger blockieren Aufgaben den Thread und desto häufiger kommen träge Klicks vor. Bei mobilen Geräten mit schwächerer CPU fällt das besonders auf. ## Wie begrenzt du den Hydration-Aufwand? - **Server-Komponenten nutzen:** In modernen [Next.js](/glossar/nextjs)-Setups laufen Komponenten standardmäßig auf dem Server und schicken kein JavaScript an den Client. Nur Komponenten mit Interaktion werden als Client-Komponenten markiert. - **Interaktion isolieren:** Ein Formular oder Menü ist eine kleine Client-Insel, der Rest bleibt statisches HTML. - **Bundles verkleinern:** Abhängigkeiten prüfen, Code-Splitting, Lazy Loading für Elemente unterhalb des sichtbaren Bereichs. - **Third-Party-Skripte reduzieren:** Tracking, Chat und Widgets zählen oft mehr als der eigene Code. - **Messen:** Chrome DevTools und Lighthouse zeigen lange Aufgaben und ungenutztes JavaScript. ## Hydration vs. JS-Shell Beide Begriffe werden vermischt. Bei **Hydration** kommt der Inhalt als fertiges HTML an, JavaScript ergänzt Interaktivität. Bei einer **JS-Shell** (clientseitiges Rendering) liefert der Server ein fast leeres Dokument mit einem Container, und der Inhalt entsteht erst nach dem Ausführen des JavaScripts. Crawler und KI-Abrufer, die kein JavaScript ausführen oder nur eingeschränkt, sehen dann wenig bis nichts. Für Marketing- und Fachseiten ist die Shell daher eine schlechte Wahl; siehe [Crawlability](/glossar/crawlability). ## Wie handhaben wir das bei Modern Stack? Wir liefern Inhalte als HTML aus und begrenzen JavaScript auf Stellen, an denen es nötig ist: Formulare, Navigation auf Mobilgeräten, Webseiten-Check. Fachtexte, Glossar und Studienseiten bleiben statisch oder serverseitig. Das senkt Bundle-Größe, verbessert [Core Web Vitals](/glossar/core-web-vitals) und sorgt dafür, dass der Text auch ohne JavaScript lesbar bleibt. Die Architekturentscheidungen dazu stehen im Thema [SSR/SSG-Stack](/themen/ssr-ssg-stack). ## Typische Fehler 1. Ganze Seiten als Client-Komponente markieren, obwohl nur ein Button interaktiv ist. 2. Inhalte erst nach einem Client-Fetch rendern. 3. Große Bibliotheken für kleine Effekte einbinden. 4. Unterschiede zwischen Server- und Client-Ausgabe, die Hydration-Warnungen auslösen. 5. Nur den Desktop messen, mobile Werte ignorieren. ## Verwandte Themen - [SSR](/glossar/ssr) - [INP](/glossar/inp) - [Next.js](/glossar/nextjs) - [Core Web Vitals](/glossar/core-web-vitals) - [SSR/SSG-Stack](/themen/ssr-ssg-stack) ## Quellen - [React — hydrateRoot](https://react.dev/reference/react-dom/client/hydrateRoot) — React; Offizielle Referenz, wie React servergerendertes HTML hydriert. - [web.dev — Rendering on the Web](https://web.dev/articles/rendering-on-the-web) — Google web.dev; Vergleicht SSR, Hydration und clientseitiges Rendering samt Kosten. - [SSR/SSG-Stack](https://modern-stack.de/themen/ssr-ssg-stack) — Modern Stack; Praxis, wie wir Rendering und Interaktivität trennen. ## FAQ ### Ist Hydration schlecht? Nein. Sie ist nötig, damit servergerendertes HTML interaktiv wird. Zum Problem wird sie, wenn viel mehr Komponenten hydriert werden, als Interaktion brauchen: Das kostet Ladezeit und verzögert Eingaben. ### Woran merke ich zu viel Hydration? Lange Aufgaben im Main Thread, große JavaScript-Bundles und träge Klicks direkt nach dem Laden. Das zeigt sich in schlechtem INP und in Lighthouse-Hinweisen zu ungenutztem JavaScript. ### Was ist der Unterschied zwischen Hydration und einer JS-Shell? Bei Hydration kommt der Inhalt bereits als HTML vom Server und JavaScript ergänzt Interaktivität. Bei einer JS-Shell liefert der Server nur ein leeres Gerüst, und der Inhalt entsteht erst im Browser. Das ist schlechter für Crawler und KI-Abrufer. ## Related - [SSR](https://modern-stack.de/glossar/ssr) - [INP](https://modern-stack.de/glossar/inp) - [SSR/SSG-Stack](https://modern-stack.de/themen/ssr-ssg-stack) - [Next.js](https://modern-stack.de/glossar/nextjs) - [Core Web Vitals](https://modern-stack.de/glossar/core-web-vitals) ## Inline Entity Mentions - [[entity:inp]] → https://modern-stack.de/themen/inp - [[entity:extrahierbarkeit]] → https://modern-stack.de/themen/extrahierbarkeit - [[entity:ssr]] → https://modern-stack.de/themen/ssr - [[entity:ssg]] → https://modern-stack.de/themen/ssg - [[entity:nextjs]] → https://modern-stack.de/themen/nextjs - [[entity:crawlability]] → https://modern-stack.de/themen/crawlability - [[entity:core-web-vitals]] → https://modern-stack.de/themen/core-web-vitals - [[entity:ssr-ssg-stack]] → https://modern-stack.de/themen/ssr-ssg-stack ## Strukturierte Daten ```json { "@context": "https://schema.org", "@graph": [ { "@type": "WebSite", "@id": "https://modern-stack.de/#website", "url": "https://modern-stack.de", "name": "Modern Stack", "description": "Wir modernisieren bestehende Unternehmenswebseiten — schneller, klarer und besser lesbar für Suche und KI. Inhalte bleiben. Ab 500 €.", "publisher": { "@id": "https://modern-stack.de/#organization" }, "inLanguage": "de-DE" }, { "@type": [ "Organization", "ProfessionalService" ], "@id": "https://modern-stack.de/#organization", "name": "Modern Stack", "legalName": "Modern Stack", "url": "https://modern-stack.de", "logo": "https://modern-stack.de/brand/logo.png", "email": "info@modern-stack.de", "telephone": "+4915225317285", "sameAs": [ "https://www.google.com/search?kgmid=/g/11p1mc1kq_&q=Modern+Stack", "https://stevebaka.de", "https://www.linkedin.com/in/steve-baka/", "https://www.mallorca-expats.de" ], "foundingLocation": { "@type": "Place", "name": "Bad Schönborn, Deutschland" }, "address": { "@type": "PostalAddress", "streetAddress": "Glöckelsberg 13/2", "postalCode": "76669", "addressLocality": "Bad Schönborn", "addressRegion": "Baden-Württemberg", "addressCountry": "DE" }, "geo": { "@type": "GeoCoordinates", "latitude": 49.22167, "longitude": 8.65734 }, "areaServed": [ { "@type": "Place", "name": "Bad Schönborn", "url": "https://modern-stack.de/regionen/bad-schoenborn" }, { "@type": "Place", "name": "Mingolsheim", "alternateName": "Bad Mingolsheim", "url": "https://modern-stack.de/regionen/mingolsheim" }, { "@type": "Place", "name": "Langenbrücken", "alternateName": "Bad Langenbrücken", "url": "https://modern-stack.de/regionen/langenbruecken" }, { "@type": "Country", "name": "DE" }, { "@type": "Country", "name": "AT" }, { "@type": "Country", "name": "CH" } ], "knowsAbout": [ "Webseite-Modernisierung", "WordPress-Migration", "Generative Engine Optimization", "Lokale Sichtbarkeit Bad Schönborn" ], "founder": { "@id": "https://modern-stack.de/#person" } }, { "@type": "Person", "@id": "https://modern-stack.de/#person", "name": "Steve Baka", "jobTitle": "Gründer, Modern Stack", "url": "https://stevebaka.de", "email": "info@modern-stack.de", "telephone": "+4915225317285", "sameAs": [ "https://stevebaka.de", "https://www.linkedin.com/in/steve-baka/", "https://www.mallorca-expats.de", "https://geo-seo-aio.de" ], "worksFor": { "@id": "https://modern-stack.de/#organization" }, "knowsAbout": [ "Webseite-Modernisierung", "Generative Engine Optimization", "AI Search", "WordPress Migration", "Knowledge Graph", "Lokale Sichtbarkeit D-A-CH" ] }, { "@type": "WebPage", "@id": "https://modern-stack.de/glossar/hydration#webpage", "url": "https://modern-stack.de/glossar/hydration", "name": "Hydration erklärt: HTML interaktiv machen | Modern Stack", "description": "Hydration einfach erklärt: Wie React vorgerendertes HTML interaktiv macht, warum zu viel Hydration INP verschlechtert und wie du den Aufwand begrenzt.", "isPartOf": { "@id": "https://modern-stack.de/#website" }, "about": { "@id": "https://modern-stack.de/glossar/hydration#main" }, "breadcrumb": { "@id": "https://modern-stack.de/glossar/hydration#breadcrumb" }, "dateModified": "2026-10-06T18:00:00+00:00", "inLanguage": "de-DE" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/hydration#main", "name": "Hydration erklärt: HTML interaktiv machen", "headline": "Hydration erklärt: HTML interaktiv machen", "alternateName": "Hydration", "description": "Hydration ist der Schritt, in dem der Browser vorgerendertes HTML mit JavaScript verbindet und interaktiv macht. Zu viel Hydration bedeutet schweres JavaScript, träge Reaktion (INP) und unnötigen Ballast.", "abstract": [ { "@value": "Hydration ist der Schritt, in dem der Browser vorgerendertes HTML mit JavaScript verbindet und interaktiv macht. Zu viel Hydration bedeutet schweres JavaScript, träge Reaktion (INP) und unnötigen Ballast.", "@language": "de" }, { "@value": "Hydration is the step where the browser attaches JavaScript to pre-rendered HTML and makes it interactive. Too much hydration means heavy JavaScript, sluggish response (INP) and needless overhead.", "@language": "en" } ], "url": "https://modern-stack.de/glossar/hydration", "inLanguage": [ "de-DE", "en" ], "datePublished": "2026-08-31T18:00:00+00:00", "dateModified": "2026-10-06T18:00:00+00:00", "author": { "@id": "https://modern-stack.de/#person" }, "publisher": { "@id": "https://modern-stack.de/#organization" }, "mainEntityOfPage": { "@id": "https://modern-stack.de/glossar/hydration#webpage" }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".gb-direct-answer", ".gb-faq-answer" ] }, "encoding": { "@type": "MediaObject", "encodingFormat": "text/markdown", "name": "English direct answer", "text": "Hydration is the process in which a client-side framework such as React takes server-rendered HTML, attaches event handlers and state, and makes it interactive. It lets pages arrive as readable HTML, but hydrating more components than necessary costs JavaScript and main-thread time and hurts INP." }, "citation": [ "https://react.dev/reference/react-dom/client/hydrateRoot", "https://web.dev/articles/rendering-on-the-web", "https://modern-stack.de/themen/ssr-ssg-stack" ], "mentions": [ { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/ssr#main", "name": "SSR", "alternateName": "Server-Side Rendering", "url": "https://modern-stack.de/glossar/ssr" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/inp#main", "name": "INP", "alternateName": "Interaction to Next Paint", "url": "https://modern-stack.de/glossar/inp" }, { "@type": "Article", "@id": "https://modern-stack.de/themen/ssr-ssg-stack#main", "name": "SSR/SSG-Stack", "alternateName": "SSR/SSG stack", "url": "https://modern-stack.de/themen/ssr-ssg-stack" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/nextjs#main", "name": "Next.js", "alternateName": "Next.js", "url": "https://modern-stack.de/glossar/nextjs" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/core-web-vitals#main", "name": "Core Web Vitals", "alternateName": "Core Web Vitals", "url": "https://modern-stack.de/glossar/core-web-vitals" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/extrahierbarkeit#main", "name": "Extrahierbarkeit", "alternateName": "Extractability", "url": "https://modern-stack.de/glossar/extrahierbarkeit" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/ssg#main", "name": "SSG", "alternateName": "Static Site Generation", "url": "https://modern-stack.de/glossar/ssg" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/crawlability#main", "name": "Crawlability", "alternateName": "Crawlability", "url": "https://modern-stack.de/glossar/crawlability" } ], "inDefinedTermSet": "https://modern-stack.de/glossar" }, { "@type": "BreadcrumbList", "@id": "https://modern-stack.de/glossar/hydration#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Startseite", "item": "https://modern-stack.de/" }, { "@type": "ListItem", "position": 2, "name": "Glossar", "item": "https://modern-stack.de/glossar" }, { "@type": "ListItem", "position": 3, "name": "Hydration", "item": "https://modern-stack.de/glossar/hydration" } ] }, { "@type": "FAQPage", "@id": "https://modern-stack.de/glossar/hydration#faq", "mainEntity": [ { "@type": "Question", "name": "Ist Hydration schlecht?", "acceptedAnswer": { "@type": "Answer", "text": "Nein. Sie ist nötig, damit servergerendertes HTML interaktiv wird. Zum Problem wird sie, wenn viel mehr Komponenten hydriert werden, als Interaktion brauchen: Das kostet Ladezeit und verzögert Eingaben." } }, { "@type": "Question", "name": "Woran merke ich zu viel Hydration?", "acceptedAnswer": { "@type": "Answer", "text": "Lange Aufgaben im Main Thread, große JavaScript-Bundles und träge Klicks direkt nach dem Laden. Das zeigt sich in schlechtem INP und in Lighthouse-Hinweisen zu ungenutztem JavaScript." } }, { "@type": "Question", "name": "Was ist der Unterschied zwischen Hydration und einer JS-Shell?", "acceptedAnswer": { "@type": "Answer", "text": "Bei Hydration kommt der Inhalt bereits als HTML vom Server und JavaScript ergänzt Interaktivität. Bei einer JS-Shell liefert der Server nur ein leeres Gerüst, und der Inhalt entsteht erst im Browser. Das ist schlechter für Crawler und KI-Abrufer." } } ] } ] } ```