Vue.js: SSR/SSG 与 Nuxt

传统 Vue SPA（CSR）：
  1. 浏览器请求 → 返回空 HTML（<div id="app"></div>）
  2. 下载 JS（500KB）
  3. 执行 JS（Vue 启动）
  4. 渲染内容
  5. 用户看到内容
  
  首屏时间：3-5 秒
  SEO：Google 抓不到内容（spa 内容是 JS 渲染的）

Nuxt 3 SSR：
  1. 浏览器请求 → 服务端渲染完整 HTML
  2. 返回带内容的 HTML（首屏 0.5 秒）
  3. 下载 JS（hydration 所需）
  4. 客户端"激活"（接管交互）
  
  首屏时间：0.5 秒
  SEO：✅ 完美（HTML 包含内容）

// server/api/products.js（Nuxt 3 自动路由）
export default defineEventHandler(async (event) => {
  return await $fetch('https://api.example.com/products')
})

<!-- pages/products.vue（自动路由） -->
<template>
  <div>
    <ProductCard v-for="product in products" :key="product.id" :product="product" />
  </div>
</template>

<script setup lang="ts">
// useFetch 在服务端预取数据
const { data: products } = await useFetch('/api/products')
</script>

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev  # 默认 http://localhost:3000

my-nuxt-app/
├── assets/              # 资源（图片、字体）
│   └── css/
│       └── main.css
├── components/          # 公共组件
│   ├── AppHeader.vue
│   └── AppFooter.vue
│   └── product/
│       └── ProductCard.vue  # 嵌套目录自动注册
├── composables/         # 组合式函数
│   └── useAuth.ts
├── layouts/             # 布局
│   ├── default.vue      # 默认布局
│   └── admin.vue        # 后台布局
├── middleware/          # 路由中间件
│   └── auth.ts
├── pages/               # 文件路由（自动生成）
│   ├── index.vue        # /
│   ├── about.vue       # /about
│   ├── products/
│   │   ├── index.vue    # /products
│   │   └── [id].vue     # /products/:id
│   └── admin/
│       └── index.vue    # /admin
├── plugins/             # Nuxt 插件
│   └── pinia.ts
├── public/              # 静态资源
├── server/              # 服务端代码
│   ├── api/             # API 路由（自动注册）
│   │   └── products.ts  # /api/products
│   └── middleware/      # 服务端中间件
├── stores/              # Pinia stores
├── app.vue              # 根组件
├── nuxt.config.ts       # Nuxt 配置
└── package.json

pages/index.vue           → /
pages/about.vue          → /about
pages/products/index.vue → /products
pages/products/[id].vue  → /products/:id
pages/admin/index.vue    → /admin

<script setup lang="ts">
// useFetch 在 SSR 时服务端执行，CSR 时客户端执行
const { data, pending, error, refresh } = await useFetch('/api/products')

// 5 大返回值
// data: 响应数据
// pending: 加载中
// error: 错误信息
// refresh: 重新获取方法
// status: 状态码
</script>

<script setup lang="ts">
const { data } = await useAsyncData('products', () => 
  $fetch('/api/products')
)

// 选项：缓存、依赖、转换
const { data: users } = await useAsyncData(
  'users',
  () => $fetch('/api/users'),
  {
    cache: 'force-cache',  // 强制缓存
    default: () => []      // 默认值
  }
)
</script>

<script setup lang="ts">
// useState 替代 ref（SSR 友好）
const cart = useState('cart', () => ({ items: [], total: 0 }))

// 修改
cart.value.items.push(product)
</script>

// 1. useFetch：服务端数据预取
const { data } = await useFetch('/api/products')

// 2. useAsyncData：通用异步
const { data } = await useAsyncData('key', fetcher)

// 3. useState：全局状态（SSR 友好）
const user = useState('user', () => null)

// 4. useRoute：当前路由
const route = useRoute()

// 5. useRuntimeConfig：运行时配置
const config = useRuntimeConfig()

export default defineNuxtConfig({
  // 1. 模块
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@vueuse/nuxt'
  ],
  
  // 2. CSS
  css: ['~/assets/css/main.css'],
  
  // 3. 运行时配置
  runtimeConfig: {
    apiSecret: 'xxx',  // 服务端
    public: {
      apiBase: 'https://api.example.com'  // 客户端
    }
  },
  
  // 4. 渲染模式
  ssr: true,  // 启用 SSR
  
  // 5. 应用配置
  app: {
    head: {
      title: 'My App',
      meta: [
        { name: 'description', content: 'My app description' }
      ]
    }
  }
})

<script setup lang="ts">
// ✅ Nuxt 自动导入：
// - Vue 3 API（ref, computed, watch）
// - Nuxt 3 composables（useFetch, useState）
// - 组件（components/ 目录）
// - utils/ 目录

const count = ref(0)
const { data } = await useFetch('/api/products')
</script>

<script setup lang="ts">
useHead({
  title: 'iPhone 15 Pro - My Shop',
  meta: [
    { name: 'description', content: 'Buy iPhone 15 Pro at best price' },
    { property: 'og:title', content: 'iPhone 15 Pro' },
    { property: 'og:image', content: '/iphone.jpg' }
  ]
})
</script>

my-nuxt-app/
├── pages/            # 文件路由（自动生成）
├── components/       # 自动注册组件
├── composables/      # 自动导入
├── server/api/       # API 路由（服务端）
├── server/middleware/
├── middleware/       # 客户端中间件
├── plugins/          # Nuxt 插件
├── layouts/          # 布局
└── nuxt.config.ts    # Nuxt 配置

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',  // Tailwind CSS 集成
    '@pinia/nuxt',          // Pinia 状态管理
    '@vueuse/nuxt',         // VueUse 工具集
    '@nuxt/image',          // 图片优化
    'nuxt-icon'             // 图标系统
  ]
})