Vue.js 服务端渲染（SSR）

什么是 SSR？

服务端渲染（Server-Side Rendering，SSR）是指在服务器上将 Vue 组件渲染成 HTML 字符串，然后发送给客户端。这与客户端渲染（CSR）不同，后者在浏览器中渲染组件。

SSR 的优势

1. 更好的 SEO

搜索引擎爬虫可以直接看到完整的页面内容。

2. 更快的首屏加载

用户可以更快地看到页面内容，无需等待 JavaScript 下载和执行。

3. 更好的性能（在某些情况下）

对于内容密集型应用，SSR 可以提供更好的性能。

SSR 的劣势

服务器负载更高
开发复杂度增加
部署和维护成本更高
某些浏览器 API 不可用

使用 Nuxt.js（推荐）

Nuxt.js 是基于 Vue 的 SSR 框架，提供了开箱即用的 SSR 支持。

安装 Nuxt

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

Nuxt 项目结构

my-app/
├── pages/          # 页面（自动路由）
├── components/     # 组件
├── layouts/        # 布局
├── composables/    # 组合式函数
├── plugins/        # 插件
├── middleware/     # 中间件
├── public/         # 静态资源
├── server/         # 服务端代码
└── nuxt.config.ts  # 配置文件

创建页面

<!-- pages/index.vue -->
<script setup>
const title = 'Welcome to Nuxt!'
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>This page is server-rendered!</p>
  </div>
</template>

数据获取

<!-- pages/posts/[id].vue -->
<script setup>
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.id}`)
</script>

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

手动实现 SSR

如果不使用 Nuxt，可以手动实现 SSR：

1. 安装依赖

npm install express vue @vue/server-renderer

2. 创建服务器

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

const server = express()

server.get('*', async (req, res) => {
  const app = createSSRApp({
    data() {
      return {
        message: 'Hello from SSR!'
      }
    },
    template: `<div>{{ message }}</div>`
  })
  
  const html = await renderToString(app)
  
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue SSR</title>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
    </html>
  `)
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

3. 客户端激活（Hydration）

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

const app = createSSRApp({
  data() {
    return {
      message: 'Hello from SSR!'
    }
  },
  template: `<div>{{ message }}</div>`
})

app.mount('#app')

SSR 数据预取

<!-- pages/users.vue -->
<script setup>
// 服务端和客户端都会执行
const { data: users, pending, error } = await useFetch('/api/users')
</script>

<template>
  <div>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <h1>Users</h1>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

SSR 生命周期

在 SSR 中，只有 beforeCreate 和 created 钩子会在服务端执行：

<script setup>
import { onMounted, onServerPrefetch } from 'vue'

// 只在服务端执行
onServerPrefetch(async () => {
  console.log('Server prefetch')
  // 预取数据
})

// 只在客户端执行
onMounted(() => {
  console.log('Client mounted')
  // 客户端逻辑
})
</script>

处理浏览器 API

某些浏览器 API 在服务端不可用：

<script setup>
import { ref, onMounted } from 'vue'

const windowWidth = ref(0)

// ❌ 错误：window 在服务端不存在
// const windowWidth = ref(window.innerWidth)

// ✅ 正确：在客户端钩子中使用
onMounted(() => {
  windowWidth.value = window.innerWidth
})

// 或者使用条件判断
if (typeof window !== 'undefined') {
  windowWidth.value = window.innerWidth
}
</script>

状态管理与 SSR

Pinia with SSR

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null
  }),
  actions: {
    async fetchUser() {
      // 服务端和客户端都会执行
      const response = await fetch('/api/user')
      this.user = await response.json()
    }
  }
})

<!-- pages/profile.vue -->
<script setup>
const userStore = useUserStore()

// 服务端预取数据
await userStore.fetchUser()
</script>

<template>
  <div>
    <h1>{{ userStore.user?.name }}</h1>
  </div>
</template>

缓存策略

页面级缓存

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },  // 预渲染
    '/api/**': { cache: { maxAge: 60 } },  // API 缓存
    '/admin/**': { ssr: false }  // 禁用 SSR
  }
})

组件级缓存

<script setup>
// 缓存组件 60 秒
defineOptions({
  cache: {
    maxAge: 60
  }
})
</script>

静态站点生成（SSG）

Nuxt 支持静态站点生成：

# 生成静态站点
npm run generate

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  target: 'static'
})

混合渲染

可以为不同路由选择不同的渲染模式：

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },           // SSG
    '/blog/**': { swr: 3600 },          // ISR (增量静态再生)
    '/admin/**': { ssr: false },        // CSR
    '/api/**': { cors: true }           // API
  }
})

SEO 优化

<!-- pages/blog/[id].vue -->
<script setup>
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.id}`)

// 设置 meta 标签
useHead({
  title: post.value.title,
  meta: [
    { name: 'description', content: post.value.excerpt },
    { property: 'og:title', content: post.value.title },
    { property: 'og:description', content: post.value.excerpt },
    { property: 'og:image', content: post.value.image }
  ]
})
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </article>
</template>

性能优化

1. 代码分割

<script setup>
// 懒加载组件
const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)
</script>

2. 预取关键资源

<script setup>
useHead({
  link: [
    { rel: 'preload', href: '/fonts/main.woff2', as: 'font' },
    { rel: 'prefetch', href: '/api/data' }
  ]
})
</script>

3. 使用 CDN

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    cdnURL: 'https://cdn.example.com'
  }
})

部署

Vercel

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel

Netlify

# 构建命令
npm run build

# 输出目录
.output/public

Node.js 服务器

# 构建
npm run build

# 启动
node .output/server/index.mjs

总结

SSR 提供更好的 SEO 和首屏性能
Nuxt.js 是 Vue SSR 的最佳选择
注意服务端和客户端的差异
合理使用缓存策略
可以混合使用 SSR、SSG 和 CSR
针对不同场景选择合适的渲染模式

下一步

接下来学习工具链和生态，了解 Vue 生态系统中的工具和库。

#Vue.js 服务端渲染（SSR）

#什么是 SSR？

#SSR 的优势

#1. 更好的 SEO

#2. 更快的首屏加载

#3. 更好的性能（在某些情况下）

#SSR 的劣势

#使用 Nuxt.js（推荐）

#安装 Nuxt

#Nuxt 项目结构

#创建页面

#数据获取

#手动实现 SSR

#1. 安装依赖

#2. 创建服务器

#3. 客户端激活（Hydration）

#SSR 数据预取

#SSR 生命周期

#处理浏览器 API

#状态管理与 SSR

#Pinia with SSR

#缓存策略

#页面级缓存

#组件级缓存

#静态站点生成（SSG）

#混合渲染

#SEO 优化

#性能优化

#1. 代码分割

#2. 预取关键资源

#3. 使用 CDN

#部署

#Vercel

#Netlify

#Node.js 服务器

#总结

#下一步