Vue 教程：SSR 与静态站点生成（SSG）的对比及适用场景

快速概述

在 Vue 应用开发中，服务端渲染（SSR）与静态站点生成（SSG）是两种主流的预渲染技术，它们共同解决单页应用（SPA）首屏加载慢、SEO 不友好等核心问题。SSR 适用于内容频繁更新、需要实时数据的动态站点；SSG 则适用于内容相对固定、以展示为主的博客、文档站或营销页面。前置环境要求：Node.js 16+、Vue 3.x、Vite 或 Nuxt 3 脚手架工具。

核心概念与原理

SSR 的核心机制是在服务器端运行 Vue 实例，将组件渲染为 HTML 字符串后发送给浏览器，浏览器再对页面进行激活（Hydration）以绑定事件。每次请求都会触发服务器端渲染，因此能实时反映数据变化。SSG 则在构建阶段一次性将页面渲染为静态 HTML 文件，部署到 CDN 后无需服务器动态计算，访问速度极快。SSG 的构建流程通常包含数据预取、模板渲染和静态文件输出三个步骤，适合内容变更不频繁的场景。

实战步骤与代码

场景一：使用 Nuxt 3 搭建 SSR 应用

1. 创建项目：npx nuxi init ssr-demo，选择 Nuxt 3 模板。
2. 安装依赖：npm install。
3. 在 app.vue 中编写页面组件，Nuxt 默认启用 SSR。
4. 启动开发服务器：npm run dev，访问页面查看服务端渲染的 HTML 源码。

// app.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script setup> // 该数据在服务器端渲染时即被填充 const message = 'Hello SSR!' </script>

场景二：使用 VitePress 实现 SSG

1. 初始化项目：npm create vitepress@latest ssg-demo。
2. 在 docs 目录下编写 Markdown 文件，VitePress 会在构建时将其渲染为静态 HTML。
3. 运行 npm run build，生成 dist 目录，可直接部署到任意静态托管平台。

# docs/index.md
欢迎使用 VitePress
这是一个静态站点生成示例，构建后输出为纯 HTML 文件。

常见坑点与优化

• SSR 中访问浏览器 API：在 onMounted 或 client-only 组件中访问 window、document，避免服务端报错。
• SSG 数据更新滞后：内容变更后需重新构建，可配置 CI/CD 定时触发构建任务。
• 性能优化：SSR 应启用流式渲染与缓存策略；SSG 应压缩静态资源并启用 CDN 缓存。

选择 SSR 还是 SSG，关键在于内容更新频率与交互复杂度。动态数据优先 SSR，静态内容优先 SSG，两者也可混合使用以发挥各自优势。