JavaScript Interview Question #174

What is hydration in modern web applications?

Performance, Browser APIs, Rendering & Modern Web Architecture Senior Advanced

Quick Interview Answer

Hydration is the process in which client-side JavaScript attaches application behavior and event handling to HTML that was already rendered on the server. This allows users to receive initial markup quickly while still gaining rich client-side interactivity.

Detailed Explanation

Hydration is the process in which client-side JavaScript attaches application behavior and event handling to HTML that was already rendered on the server. This allows users to receive initial markup quickly while still gaining rich client-side interactivity.

Hydration must reconcile the client application's expected structure with the server-rendered markup. Frameworks implement the details, and mismatches can cause warnings, re-rendering, or incorrect behavior.

Code Example

// Conceptual server-rendered HTML:
<button id="save">Save</button>

// During client startup, behavior is attached:
document
    .querySelector("#save")
    .addEventListener("click", save);

// Framework hydration performs this process at application scale.