SSR 与测试

这一课你将能做到

1. 说出 SSR 和 CSR 的区别及适用场景
2. 用 Nuxt 3 创建一个 SSR 项目
3. 用 Vitest 编写 Vue 组件的单元测试
4. 理解 E2E 测试的概念和工具

为什么要学

CSR（客户端渲染）的缺点是首屏慢、SEO 差。SSR（服务端渲染）让服务器先渲染好 HTML 再发给浏览器，解决这两个痛点。测试则是代码质量的「保险」，没有测试的项目上线就像裸奔。

人话：SSR 就像「餐厅提前把菜做好再端上来」，用户不用等；CSR 是「现场炒菜」，用户得看着锅等。测试就像「出厂质检」，不让残次品流到用户手里。

先建立图像

CSR（客户端渲染）：
浏览器请求 ──→ 服务器返回空 HTML + JS ──→ 浏览器下载 JS ──→ 执行 JS 渲染页面
                （白屏等待）

SSR（服务端渲染）：
浏览器请求 ──→ 服务器执行 Vue 渲染 ──→ 返回完整 HTML ──→ 浏览器直接显示
                （首屏快，SEO 友好）

跟着做

步骤 1：创建 Nuxt 3 项目

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

Nuxt 是 Vue 官方推荐的 SSR 框架，约定优于配置。

步骤 2：Nuxt 页面即路由

<!-- pages/index.vue -->
<template>
  <h1>首页</h1>
</template>

<!-- pages/about.vue -->
<template>
  <h1>关于</h1>
</template>

pages/ 目录下的文件自动成为路由，无需手动配置。

步骤 3：Nuxt 数据获取

<script setup>
// 服务端和客户端都会执行，数据在服务端渲染时注入
const { data: posts } = await useFetch('https://api.example.com/posts')
</script>

<template>
  <ul>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

useFetch 是 Nuxt 封装的数据获取组合式函数，自动处理 SSR 数据 hydration。

步骤 4：Vitest 单元测试

npm install -D vitest @vue/test-utils jsdom

// vitest.config.js
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: { environment: 'jsdom' }
})

// tests/Counter.spec.js
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Counter from '../src/components/Counter.vue'

describe('Counter', () => {
  it('渲染初始值', () => {
    const wrapper = mount(Counter)
    expect(wrapper.text()).toContain('0')
  })

  it('点击按钮加一', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('1')
  })
})

npx vitest run