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

步骤 5：@vue/test-utils 常用 API

import { mount, shallowMount } from '@vue/test-utils'

// mount：完整渲染，包含子组件
const wrapper = mount(Parent)

// shallowMount：浅渲染，子组件用 stub 替代
const wrapper = shallowMount(Parent)

// 查找元素
wrapper.find('button')           // CSS 选择器
wrapper.findComponent(Child)     // 组件引用
wrapper.findAll('li')            // 查找多个

// 触发事件
await wrapper.trigger('click')
await wrapper.setValue('输入内容')

// 断言
expect(wrapper.text()).toBe('hello')
expect(wrapper.classes()).toContain('active')
expect(wrapper.emitted()).toHaveProperty('submit')

步骤 6：E2E 测试概念

E2E（端到端）测试模拟真实用户操作，从浏览器层面验证整个流程。

// Playwright 示例
import { test, expect } from '@playwright/test'

test('用户登录流程', async ({ page }) => {
  await page.goto('/login')
  await page.fill('input[name="email"]', 'test@example.com')
  await page.fill('input[name="password"]', '123456')
  await page.click('button[type="submit"]')
  await expect(page).toHaveURL('/dashboard')
})

常用 E2E 工具：Playwright、Cypress、Puppeteer。

讲清楚要点

1. SSR 提升首屏和 SEO：服务器返回完整 HTML，浏览器直接显示；搜索引擎能抓取内容。
2. Nuxt 是 Vue 的 SSR 框架：约定式路由、自动导入、数据获取、SEO 优化开箱即用。
3. Vitest 是 Vite 原生的测试框架：比 Jest 更快，配置更简单，与 Vite 项目无缝集成。
4. 单元测试测组件行为：输入 props，验证渲染结果和事件触发。
5. E2E 测试测完整流程：模拟用户操作，验证跨页面、跨组件的业务流程。

你可能会懵的地方

• SSR 和 SSG 有什么区别？ SSR 每次请求时实时渲染；SSG（静态站点生成）构建时预渲染为 HTML，适合内容不变的页面。

• Nuxt 和 Next.js 怎么选？ Nuxt 是 Vue 生态；Next.js 是 React 生态。技术栈决定选择。

• 单元测试和 E2E 测试怎么分工？ 单元测试覆盖组件逻辑（多、快、细）；E2E 测试覆盖关键业务流程（少、慢、粗）。

• 测试覆盖率多少合适？ 核心业务逻辑 80% 以上，工具函数 100%，UI 展示组件适当即可。

• Vitest 能替代 Jest 吗？ 新项目推荐 Vitest，更快更现代；已有 Jest 项目迁移成本需评估。

错法对照

错法	问题	正解
在 Nuxt 里用 onMounted 发请求	服务端不会执行，数据缺失	用 useFetch 或 useAsyncData
测试里直接修改 props	Vue 警告，测试不真实	用 wrapper.setProps()
所有测试都用 E2E	运行慢、维护难	金字塔：单元测试多，E2E 少
在 SSR 中直接操作 window/document	服务端没有这些对象	用 process.client 判断环境
测试代码里写真实 API 请求	测试不稳定、依赖网络	用 mock 拦截请求

卡点急救

1. Nuxt 页面 404：检查文件是否在 pages/ 目录下，文件名即路由路径。
2. Vitest 报错找不到模块：检查 vitest.config.js 的 alias 配置是否与 vite.config.js 一致。
3. 测试异步组件不渲染：用 await flushPromises() 或 await wrapper.vm.$nextTick()。

面试常问

• SSR 的优缺点？ 优点：首屏快、SEO 好；缺点：服务器压力大、开发复杂度高、部分浏览器 API 不可用。

• Nuxt 的 useFetch 和 useAsyncData 区别？ useFetch 是 useAsyncData + $fetch 的封装，更简洁；useAsyncData 更灵活，可自定义数据处理。

• Vue 组件测试的核心思路？ 渲染组件 → 交互（点击/输入）→ 断言（DOM 状态、事件触发、props 变化）。

自测三问

1. SSR 相比 CSR 解决了什么问题？
2. Nuxt 中为什么不能用 onMounted 发请求？
3. 单元测试和 E2E 测试分别适合什么场景？

小结一句话

SSR 用 Nuxt 提升首屏和 SEO，测试用 Vitest 保障代码质量，E2E 用 Playwright 验证业务流程，这是 Vue 项目从「能用」到「好用」再到「可靠」的进阶之路。

延伸

• Nuxt 官方文档
• Vitest 官方文档
• 至此，Vue 3 核心课程全部完成。建议动手做一个完整项目巩固所学。