What is hydration in the context of SSR?

Hydration is the process where client-side Vue takes over server-rendered static HTML, attaching event listeners and reactive bindings to the existing DOM nodes instead of re-creating them from scratch. This avoids the flash/cost of a full re-render while making the page interactive.

A common pitfall is a 'hydration mismatch' — when the server-rendered HTML differs from what the client would render (e.g., due to using Date.now(), random values, or browser-only APIs during render), causing warnings and Vue to discard and re-render the mismatched DOM.