前端渲染方案全面对比：CSR vs SSR vs SSG

weixin_46764244

195人浏览 · 2026-03-27 09:55:08

weixin_46764244 · 2026-03-27 09:55:08 发布

前端渲染方案全面对比：CSR vs SSR vs SSG

📋 目录

概述
CSR 客户端渲染
SSR 服务端渲染
SSG 静态站点生成
三大方案详细对比
选型建议
总结

概述

在现代 Web 开发中，选择合适的渲染方案对应用的性能、SEO 和用户体验至关重要。本文将深入探讨三种主流渲染方案的工作原理、优缺点及适用场景。

核心概念

缩写	全称	中文名	关键特点
CSR	Client Side Rendering	客户端渲染	浏览器端动态渲染
SSR	Server Side Rendering	服务端渲染	服务器实时渲染 HTML
SSG	Static Site Generation	静态站点生成	构建时预渲染 HTML

CSR 客户端渲染

🔄 工作流程

用户请求 → 服务器返回空 HTML + JS Bundle → 浏览器下载执行 JS → 请求 API → 渲染页面

📝 详细步骤

HTML 解析：浏览器接收一个几乎为空的 HTML（通常只有一个 <div id="app"></div>）
JS 下载：加载 JavaScript 文件（可能包含框架代码、业务逻辑等）
JS 执行：执行 JavaScript，创建虚拟 DOM
API 请求：发起异步请求获取数据
DOM 渲染：将数据注入虚拟 DOM，挂载到真实 DOM
页面交互：用户可以开始操作页面

💻 代码示例

// 原生 JavaScript 实现
const app = document.getElementById('app');

// 显示加载状态
app.innerHTML = '<div>Loading...</div>';

// 请求数据
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    // 手动更新 DOM
    app.innerHTML = `
      <div class="user-card">
        <h2>${data.name}</h2>
        <p>${data.email}</p>
      </div>
    `;
  });

// Vue 3 实现
<template>
  <div class="user-card" v-if="user">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
  <div v-else>Loading...</div>
</template>

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

const user = ref(null)

onMounted(async () => {
  const res = await fetch('/api/data')
  user.value = await res.json()
})
</script>

✅ 优点

优势	说明
🚀 前后端分离	架构清晰，职责分明，便于团队协作
💰 服务器压力小	只需托管静态文件，成本低廉
🎨 交互体验好	页面无刷新切换，类似原生应用
🔧 开发效率高	组件化开发，热更新支持
🌍 适合复杂应用	后台管理系统、ToB 应用首选

❌ 缺点

劣势	说明
🐌 首屏加载慢	需等待 JS 下载执行，白屏时间长
🔍 SEO 不友好	搜索引擎爬虫可能无法抓取动态内容
📱 低端设备卡顿	大量 JS 执行消耗设备性能
⏳ 加载体验差	用户需等待数据加载完成

SSR 服务端渲染

🔄 工作流程

用户请求 → 服务器渲染完整 HTML（含数据） → 返回 HTML → 浏览器直接显示 → JS Hydration 绑定事件

📝 详细步骤

用户请求：浏览器发起页面请求
服务端渲染：服务器执行 JavaScript，渲染组件为 HTML
数据预填充：在 HTML 中嵌入初始数据
返回 HTML：发送完整的 HTML 给浏览器
立即显示：浏览器解析 HTML，立即可见内容
Hydration：下载并执行 JS，绑定事件监听器
可交互：页面变为完全可交互状态

💻 代码示例

// Node.js + Express 简单示例
app.get('/user/:id', async (req, res) => {
  // 服务端获取数据
  const userData = await fetch(`https://api.example.com/user/${req.params.id}`);
  const user = await userData.json();
  
  // 渲染 HTML 模板
  const html = `
    <!DOCTYPE html>
    <html>
      <head><title>${user.name}</title></head>
      <body>
        <div id="app">
          <div class="user-card">
            <h2>${user.name}</h2>
            <p>${user.email}</p>
          </div>
        </div>
        <script>window.__INITIAL_STATE__ = ${JSON.stringify(user)}</script>
        <script src="/app.js"></script>
      </body>
    </html>
  `;
  
  res.send(html);
});

// Nuxt.js 实现
<template>
  <div class="user-card">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
// useFetch 在服务端和客户端都能工作
const { data: user } = await useFetch('/api/data')
</script>

✅ 优点

优势	说明
⚡ 首屏速度快	服务器返回完整 HTML，无需等待 JS 执行
🔍 SEO 友好	搜索引擎可抓取完整内容
👀 用户体验好	减少白屏时间，内容立即可见
📲 低端设备友好	减少客户端计算压力

❌ 缺点

劣势	说明
💪 服务器压力大	每次请求都要渲染，CPU 负载高
🔧 开发复杂度高	需考虑服务端兼容性（window/document 不可用）
🔄 前后端耦合	可能需要全栈开发人员
🌐 需要 Node.js 环境	部署成本增加
⚠️ Hydration 成本高	客户端仍需下载并执行 JS

SSG 静态站点生成

🔄 工作流程

构建阶段：拉取数据 → 预渲染 HTML → 生成静态文件
运行时：用户请求 → CDN 返回静态 HTML → 浏览器显示 → JS Hydration

📝 详细步骤

构建时（Build Time）

编译代码：将 Vue/React 组件编译为静态 HTML
获取数据：从 CMS、API 或文件系统拉取数据
生成页面：为每个路由生成对应的 HTML 文件
输出静态文件：产出 .html 文件到构建目录

运行时（Runtime）

用户请求：访问某个页面
CDN 响应：直接从 CDN 返回预生成的 HTML
立即显示：浏览器解析 HTML，内容立即可见
Hydration：下载 JS，绑定事件，页面可交互

💻 代码示例

// Next.js getStaticProps 示例
export async function getStaticProps() {
  // 构建时获取数据
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return {
    props: {
      posts,
    },
    // 每 10 秒重新生成页面（增量静态生成）
    revalidate: 10,
  };
}

export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// Nuxt.js generate 模式
<template>
  <div class="blog-list">
    <article v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.excerpt }}</p>
    </article>
  </div>
</template>

<script setup>
// 构建时获取数据
const { data: posts } = await useFetch('/api/posts')
</script>

// Nuxt 配置文件示例
{
  "target": "static",
  "generate": {
    "routes": [
      "/blog/post-1",
      "/blog/post-2",
      "/blog/post-3"
    ]
  }
}

✅ 优点

优势	说明
⚡⚡ 极致性能	CDN 分发，全球加速，响应速度最快
💰 成本最低	只需托管静态文件，几乎零服务器成本
🔒 安全性高	无服务端代码，减少攻击面
📈 扩展性强	CDN 自动处理流量高峰
🔍 SEO 友好	预渲染完整 HTML
🚀 部署简单	可部署到任意静态托管平台

❌ 缺点

劣势	说明
📝 内容更新慢	需重新构建整个站点（ISR 可部分解决）
🔢 页面数量有限	成千上万页面会导致构建时间过长
🔐 不适合个性化	无法根据用户动态渲染内容
🕐 实时性差	内容更新有延迟（除非使用 ISR）

🆕 进阶：增量静态生成（ISR）

Next.js 提出的 ISR（Incremental Static Regeneration）解决了传统 SSG 的痛点：

export async function getStaticProps() {
  return {
    props: { /* ... */ },
    // 每 60 秒重新验证一次
    revalidate: 60,
  };
}

ISR 优势：

✅ 按需重新生成页面
✅ 保持静态站点的性能优势
✅ 内容可定期更新
✅ 无需重建整个站点

三大方案详细对比

📊 综合对比表

维度	CSR	SSR	SSG
首屏速度	⭐⭐ 慢	⭐⭐⭐⭐ 快	⭐⭐⭐⭐⭐ 极快
SEO 优化	⭐⭐ 差	⭐⭐⭐⭐⭐ 优秀	⭐⭐⭐⭐⭐ 优秀
服务器成本	⭐⭐⭐⭐⭐ 低	⭐⭐ 高	⭐⭐⭐⭐⭐ 极低
开发复杂度	⭐⭐⭐⭐⭐ 简单	⭐⭐ 复杂	⭐⭐⭐⭐ 较简单
部署难度	⭐⭐⭐⭐⭐ 简单	⭐⭐ 复杂	⭐⭐⭐⭐⭐ 简单
用户体验	⭐⭐⭐ 一般	⭐⭐⭐⭐ 好	⭐⭐⭐⭐⭐ 极好
实时性	⭐⭐⭐⭐⭐ 实时	⭐⭐⭐⭐⭐ 实时	⭐⭐ 较差（ISR 改善）
个性化支持	⭐⭐⭐⭐⭐ 完全支持	⭐⭐⭐⭐⭐ 完全支持	⭐ 不支持
扩展性	⭐⭐⭐⭐ 好	⭐⭐ 受限	⭐⭐⭐⭐⭐ 无限扩展
安全性	⭐⭐⭐⭐ 较好	⭐⭐⭐ 一般	⭐⭐⭐⭐⭐ 最好

🎯 性能指标对比

TTI（Time to Interactive，可交互时间）

CSR: 3-5 秒  ━━━━━━━━━━━━
SSR: 1-3 秒  ━━━━━━
SSG: 0.5-2 秒 ━━━━

FCP（First Contentful Paint，首次内容绘制）

CSR: 2-4 秒  ━━━━━━━━━━
SSR: 0.8-2 秒 ━━━━
SSG: 0.5-1.5 秒 ━━

LCP（Largest Contentful Paint，最大内容绘制）

CSR: 3-6 秒  ━━━━━━━━━━━━━
SSR: 1-3 秒  ━━━━━━
SSG: 0.8-2 秒 ━━━━

🔧 技术栈生态

CSR 技术栈

框架：Vue.js / React / Angular
构建工具：Vite / Webpack
路由：Vue Router / React Router
状态管理：Pinia / Vuex / Redux
部署：Vercel / Netlify / GitHub Pages

SSR 技术栈

框架：Nuxt.js / Next.js / NestJS
构建工具：Vite / Webpack
服务器：Node.js + Express / Koa
部署：AWS / 阿里云 / 自有服务器

SSG 技术栈

框架：Nuxt.js (Static Mode) / Next.js (SSG) / Gatsby / Hugo / Jekyll
CMS：Contentful / Strapi / WordPress Headless
部署：Vercel / Netlify / Cloudflare Pages

选型建议

🎯 选择 CSR 的场景

✅ 后台管理系统、Dashboard
✅ ToB 企业内部应用
✅ 需要高度交互的单页应用
✅ 不需要 SEO 的应用
✅ 团队规模小，追求开发效率

典型案例：

GitLab / GitHub 后台
在线文档编辑器
项目管理工具（Jira、Trello）

🎯 选择 SSR 的场景

✅ 新闻门户、媒体网站
✅ 电商平台（淘宝、京东）
✅ 社交网络（微博、知乎）
✅ 需要 SEO 的内容平台
✅ 用户量大，对首屏速度要求高

典型案例：

淘宝、京东商品详情页
知乎问答页
网易云音乐网页版

🎯 选择 SSG 的场景

✅ 个人博客、作品集
✅ 公司官网、产品介绍页
✅ 文档站点（Vue.js、React 官方文档）
✅ 营销页面、活动专题页
✅ 内容更新频率低的网站

典型案例：

Vercel / Netlify 官网
技术文档站点
个人博客（Hexo、Hugo）

🎯 混合方案（推荐）

现代框架支持多种渲染方式混合使用：

// Next.js 页面级渲染策略
// 首页使用 SSG
export const config = {
  unstable_runtime: 'edge'
};

// 商品详情使用 SSR
export async function getServerSideProps() {
  return { props: {} };
}

// 博客文章使用 ISR
export async function getStaticProps() {
  return {
    props: {},
    revalidate: 3600 // 1 小时重新验证
  };
}

总结

📈 发展趋势

混合渲染成为主流：单一渲染方案难以满足所有需求
边缘计算兴起：Edge Functions 让 SSR 更接近用户
ISR 普及：解决 SSG 实时性差的痛点
React Server Components：探索新的渲染范式

🏆 最佳实践

不要过早优化：先从简单的 CSR 开始，遇到瓶颈再考虑 SSR/SSG
监控关键指标：使用 Lighthouse、Web Vitals 持续监测性能
渐进式增强：可以逐步将关键页面迁移到 SSR/SSG
考虑混合方案：不同页面采用不同渲染策略

📚 参考资源

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

腾讯云开发者社区

所有评论(0)

查看更多评论

weixin_46764244

@weixin_46764244

已为社区贡献3条内容

前端渲染方案全面对比：CSR vs SSR vs SSG

weixin_46764244

前端渲染方案全面对比：CSR vs SSR vs SSG

📋 目录

概述

核心概念

CSR 客户端渲染

🔄 工作流程

📝 详细步骤

💻 代码示例

✅ 优点

❌ 缺点

SSR 服务端渲染

🔄 工作流程

📝 详细步骤

💻 代码示例

✅ 优点

❌ 缺点

SSG 静态站点生成

🔄 工作流程

📝 详细步骤

构建时（Build Time）

运行时（Runtime）

💻 代码示例

✅ 优点

❌ 缺点

🆕 进阶：增量静态生成（ISR）

三大方案详细对比

📊 综合对比表

🎯 性能指标对比

TTI（Time to Interactive，可交互时间）

FCP（First Contentful Paint，首次内容绘制）

LCP（Largest Contentful Paint，最大内容绘制）

🔧 技术栈生态

CSR 技术栈

SSR 技术栈

SSG 技术栈

选型建议

🎯 选择 CSR 的场景

🎯 选择 SSR 的场景

🎯 选择 SSG 的场景

🎯 混合方案（推荐）

总结

📈 发展趋势

🏆 最佳实践

📚 参考资源

所有评论(0)

温馨提示：您尚未绑定手机号

weixin_46764244