Hydration is the process by which a JavaScript framework takes server-rendered HTML in the browser and attaches interactivity to it, rebuilding its internal component state and connecting event listeners without recreating the DOM from scratch.
Why it matters
Server rendering gives fast visible content, but the page is not usable until hydration finishes. During that gap buttons may look ready and do nothing. Hydrating large pages is CPU-intensive, especially on low-end phones, and mismatches between server and client output produce warnings or visual glitches.
Example
Timeline for a server-rendered page:
- 0.5 s: HTML arrives and the content is visible.
- 1.2 s: the JavaScript bundle finishes downloading.
- 1.8 s: hydration completes and clicks work.
The values are illustrative, but the gap between steps 1 and 3 is where users tap and nothing happens.
Common mistakes
- Rendering different content on server and client, such as the current time.
- Hydrating the whole page when only small parts are interactive.
- Measuring only first paint and ignoring when the page becomes interactive.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.