如何理解 Vue 3 中的 SSR（服务器端渲染）？

⚡ 速记答案（30 秒）

在服务端执行同一套 Vue 组件树，生成 HTML 字符串返回给浏览器。客户端再对这份 HTML 做 hydrate，只绑定事件和补差异，而不是完全重渲染。

📖 详细讲解

标准面试回答（推荐记住）

SSR 是在服务器端执行 Vue 组件，将其渲染为 HTML 字符串发送给浏览器。浏览器收到后，Vue 客户端进行 hydration（水合），在已有的 DOM 上绑定事件监听器并激活响应式系统，而不是重新创建 DOM。优点是首屏更快、利于 SEO。

SSR 工作流程

Server Entry (entry-server.js)
- 调用 createSSRApp 创建实例。
- 解析路由、预取数据 (Composition API: useAsyncData / Options API: serverPrefetch)。
- 使用 renderToString 将 App 渲染为 HTML 字符串。
- 将 Initial State (Pinia state / Async Data) 序列化后注入到 HTML 的 window.INITIAL_STATE 中。
Client Entry (entry-client.js)
- 浏览器接收到 HTML，加载 JS。
- 客户端调用 createSSRApp。
- 从 window 中恢复状态。
- Hydration (水合)：Vue 遍历已有 DOM 树，确认主要结构一致，添加事件监听器，激活响应式。不会重新创建 DOM 节点（除非结构不匹配）。

Nuxt 3 (Nitro)

Nuxt 3 基于 Nitro 引擎，实现了更强大的 Hybrid Rendering（混合渲染）：

SSR: 动态页面
SSG: 静态页面
ISR: 增量静态再生
SWR: Stale-While-Revalidate

✅ 面试要点

•理解 SSR 的工作原理
•知道 hydration 的概念
•了解 SSR 的优缺点

💻 代码示例

Nuxt 3 SSR 示例

<!-- pages/index.vue -->
<script setup>
// 这段代码会在服务端执行
const { data } = await useFetch('/api/posts')

// useAsyncData 支持服务端数据获取
const { data: user } = await useAsyncData('user', () =>
  $fetch('/api/user')
)
</script>

<template>
  <div>
    <!-- 服务端渲染的 HTML -->
    <h1>Posts</h1>
    <ul>
      <li v-for="post in data" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>