Overview
In frameworks like React or Vue, the server sends a fully rendered HTML page to the browser (SSR). However, this HTML is 'dry'—it's not interactive. Hydration is the process where the client-side JavaScript 'wakes up' the HTML, making it a fully functional application.
How it Works
- Server: Renders the component tree to an HTML string.
- Browser: Displays the static HTML immediately.
- Client: Downloads the JavaScript bundle, recreates the component tree, and attaches event listeners to the existing DOM nodes.
Challenges
- Hydration Mismatch: Occurs if the server-rendered HTML doesn't perfectly match what the client expects.
- Performance: Large bundles can delay hydration, leaving the page 'uncanny' (visible but not interactive).