Vue 的 SSR（Nuxt.js）原理和适用场景？

pages/
  index.vue       → /
  about.vue       → /about
  users/[id].vue  → /users/:id

server/
  api/            → API 路由

nuxt.config.ts    → 配置

<!-- pages/index.vue -->
<template>
  <div>Home Page</div>
</template>

<!-- pages/users/[id].vue -->
<script setup>
const route = useRoute()
const { id } = route.params
</script>

// useFetch — 自动序列化、去重、缓存
const { data: users } = await useFetch('/api/users')

// useAsyncData — 自定义数据获取
const { data } = await useAsyncData('users', () => {
  return $fetch('/api/users')
})

// 服务端获取数据，客户端水合

// nuxt.config.ts
export default defineNuxtConfig({
  // 默认 SSR
  ssr: true,
  
  // 或混合渲染
  routeRules: {
    '/': { prerender: true },          // 静态生成
    '/blog/**': { ssr: true },         // 服务端渲染
    '/admin/**': { ssr: false },       // SPA 模式
    '/api/**': { cors: true }          // API 路由
  }
})

// server-entry.js
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

export async function render(url) {
  const app = createSSRApp(App)
  const router = createRouter({ history: createMemoryHistory() })
  app.use(router)
  
  await router.push(url)
  await router.isReady()
  
  const html = await renderToString(app)
  return html
}

// client-entry.js
import { createSSRApp } from 'vue'

const app = createSSRApp(App)
app.use(router)
app.mount('#app')
// Vue 自动检测已有 DOM，进行 hydration（复用 DOM 而非重新渲染）