Vue3渲染模式深度剖析：CSR与预渲染及SSG和SSR的选型指南

现代Web开发中，Vue项目可采用多种渲染策略满足不同需求。本文将深入解析客户端渲染、预渲染、静态站点生成和服务端渲染的核心特点。

客户端渲染（CSR，Client‑Side Rendering）

通过npm create vue@latest或npm create vite@latest初始化的Vue3项目，默认采用客户端渲染模式。服务器仅返回包含<div id="app"></div>的空HTML框架，实际DOM内容需等待浏览器执行JavaScript后动态生成。

优点

1. 实现前后端完全分离，降低开发复杂度
2. 页面切换无刷新，提供原生应用级体验
3. 服务器仅需托管静态资源，负载压力小

缺点

1. 首屏加载性能较差，需等待JS完全执行
2. 搜索引擎难以抓取动态生成的内容
3. 需要手动管理meta标签等SEO元素

预渲染 (Prerendering)

该方案在项目构建阶段利用无头浏览器预先执行Vue代码，将指定路由的渲染结果保存为静态HTML文件。用户访问时直接返回预生成内容，无需客户端执行渲染逻辑。

优点

1. 保持CSR开发体验的同时改善首屏性能
2. 部署方式简单，支持静态文件托管
3. 适合中小规模且内容稳定的项目

缺点

1. 大规模路由会导致构建时间剧增
2. 无法处理实时更新的动态内容
3. 参数化路由需要枚举所有可能值

示例

推荐使用@seresweb/vite-plugin-seo-prerender插件实现预渲染功能，配置示例如下：

vue3-mananger-prerender/vite.config.ts

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
// import VueDevTools from 'vite-plugin-vue-devtools'
import seoPrerender from "@seresweb/vite-plugin-seo-prerender";
// import { createMpaPlugin } from "vite-plugin-virtual-mpa";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// @ts-ignore
import prerenderFallback from "./plugin/vite-plugin-prerender-fallback.js";// 预渲染路由列表（从 router 中提取需要预渲染的静态路由）
// const prerenderRoutes = ["/", "/home", "/dashboard", "/about", "/404"];
// 
export default defineConfig(({ command }) => {
  // const isBuild = command === "build";  return {
    plugins: [
      vue(),
      vueJsx(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        // 推荐：生成类型声明文件，提升 TypeScript 支持
        dts: "src/auto-imports.d.ts",
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        // 推荐：生成组件类型声明文件，提升 TypeScript 支持
        dts: "src/components.d.ts",
      }),
      // VueDevTools(),      prerenderFallback({
        distDir: "dist", // 可选，默认就是 'dist'
      }),
      seoPrerender({
        routes: ["/yoy/dashboard"],
        headless: "new",
        executablePath: undefined,
      }),
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    build: {
      outDir: "dist",
      target: "es2015",
      minify: true,
    },
  };
});

自定义插件实现HTML文件回退机制：

vue3-mananger-prerender/plugin/vite-plugin-prerender-fallback.js

// vite-plugin-prerender-fallback.js
import fs from 'node:fs';
import path from 'node:path';/**
 * Vite 插件：为预览服务器添加预渲染目录回退 + SPA fallback
 * @param {Object} options
 * @param {string} options.distDir - 构建输出目录，默认 'dist'
 */
export default function prerenderFallback(options = {}) {
  const { distDir = 'dist' } = options;
  const distPath = path.resolve(process.cwd(), distDir);  return {
    name: 'vite-plugin-prerender-fallback',
    apply: 'serve', // 仅在预览/开发服务器时生效（预览模式也是 serve）
    configurePreviewServer(server) {
      // 在所有中间件之前插入我们的处理逻辑
      server.middlewares.use((req, res, next) => {
        // 1. 跳过根路径、带扩展名的文件请求、API 等（避免不必要的文件查找）
        const url = req.url;
        if (
          url === '/' ||
          path.extname(url) !== '' ||      // 有扩展名，如 .js, .css
          url.startsWith('/@') ||          // Vite 内部资源
          url.startsWith('/node_modules/')
        ) {
          return next();
        }        // 2. 构造预渲染 HTML 的完整路径：dist + url + /index.html
        //    例如 url = '/yoy/dashboard' → dist/yoy/dashboard/index.html
        const htmlPath = path.join(distPath, url, 'index.html');        // 3. 同步检查文件是否存在（也可以使用 fs.promises.access 异步）
        if (fs.existsSync(htmlPath)) {
          // 存在预渲染文件，修改请求路径指向该文件，让后续静态中间件处理
          req.url = path.posix.join(url, 'index.html');
          return next();
        }        // 4. 不存在预渲染文件，请求原样放行，最终会 fallback 到根 index.html
        return next();
      });
    },
  };
}

静态站点生成 (SSG)

静态站点生成技术是预渲染的进阶方案，能够将整个站点转化为静态HTML文件集合。它不仅支持getStaticPaths枚举动态路由参数，还能在构建阶段通过getStaticProps获取API数据，为每个页面生成完整独立的静态内容。

优点

1. 实现最佳首屏加载性能
2. 完全兼容各类搜索引擎爬虫
3. 保留组件化开发优势
4. 部署仅需CDN等静态托管服务

缺点

1. 构建时间与页面数量成正比
2. 内容更新需全站重新构建
3. 难以处理用户个性化数据

服务端渲染 (SSR)

服务端渲染会在每次请求时动态执行Vue组件，生成完整HTML响应。浏览器收到后立即展示内容，随后激活交互功能。这种实时渲染机制确保用户总能获取最新数据。

优点

1. 完美解决SEO需求
2. 显著提升首屏呈现速度
3. 支持实时数据展示

缺点

1. 服务器需要处理大量渲染请求
2. 开发复杂度显著增加
3. 首字节返回时间可能延长

不同渲染方案各具特点，开发者应根据项目规模、内容更新频率和SEO需求选择最合适的实现方式，必要时可组合使用多种技术。