How does Nuxt.js universal rendering (SSR + CSR hydration) work?

Universal rendering in Nuxt involves two phases. First, on a server request, Nuxt runs the Vue component tree in a Node.js/Nitro environment: it executes useAsyncData/useFetch handlers, renders components to HTML string using @vue/server-renderer, serializes the fetched data into a __NUXT_DATA__ script tag, and sends the complete HTML. Second, when the browser receives this HTML, it appears immediately (fast FCP). Then the Vue hydration process runs: Vue loads the client bundle, re-creates the component tree in memory, and "claims" the existing DOM nodes by attaching event listeners without re-rendering. The serialized server data prevents duplicate API calls. If the server-rendered DOM doesn't match what the client would render (hydration mismatch), Vue logs a warning and falls back to client-rendering that subtree, which is why SSR-unsafe operations (like window access) must be guarded with import.meta.client.