How does Vue handle SSR hydration?

Vue SSR hydration is the process of attaching Vue's reactive data and event listeners to the server-rendered HTML, making it interactive without re-creating the DOM. SSR rendering pipeline: Node.js server renders Vue components to HTML string using renderToString(app) or renderToNodeStream() → HTML sent to browser → Vue client-side code loads → hydration runs. Hydration process: instead of app.mount("#app"), use: app.mount("#app") — Vue detects existing server-rendered HTML and walks the existing DOM, matching it with the VDOM nodes generated by rendering, attaching event listeners and reactive data. No DOM nodes are created — existing ones are reused. State transfer (useSSRContext / useState in Nuxt): data fetched on the server must be transferred to the client to prevent duplicate network requests. Vue SSR uses window.__INITIAL_STATE__ (or similar) to embed serialized state in the HTML. Client reads this to hydrate the store/state without re-fetching. Hydration mismatch: if the server-rendered HTML doesn't match what the client renders (different data, browser-only APIs, non-deterministic output), Vue logs a warning and falls back to client-side rendering. Avoid: browser-only APIs in SSR code (wrap in onMounted or process.client checks), non-deterministic components (random IDs, current time). Nuxt useHydration: hook into the hydration payload for custom data. Streaming SSR: renderToWebStream() in Vue 3 streams HTML progressively, sending content before the entire page is rendered.