Rendering on the server
Server side rendering generates the HTML for a page on the server and sends it ready to display. Users see content fast and search engines get real markup, unlike a blank shell that waits for JavaScript.
Hydration
The static HTML is not yet interactive. Hydration is the process where the client framework loads, builds its component tree, and attaches event listeners to the existing markup so it becomes a live app.
- The server markup and the client render must match, or you get a hydration mismatch.
- Until hydration finishes, clicks and inputs may not respond.
The cost
Hydration can be expensive because the browser reruns component logic over the whole page. Techniques reduce it:
- Partial hydration hydrates only interactive islands.
- Streaming sends HTML in chunks so content appears progressively.
- Server components keep non interactive parts off the client entirely.
Key idea
SSR delivers viewable HTML immediately, and hydration later wires up interactivity, so minimizing hydrated code shortens the gap before the page responds.