CSR 客户端渲染

客户端渲染 (Client-Side Rendering)，浏览器下载空 HTML 模板后，通过 JavaScript 动态生成内容

优点

• 交互体验好(页面切换无刷新)
• 服务器压力小
• 适合复杂 Web 应用

缺点

• 首屏加载慢
• SEO 不友好
• 低端设备性能差

SSR 服务端渲染

服务端渲染 (Server-Side Rendering) ，服务器生成完整 HTML 发送给客户端

优点

• 首屏渲染快
• SEO 友好
• 兼容性好

缺点

• 服务器压力大，要求高
• TTFB(Time To First Byte，首字节时间) 较长
• 开发复杂度较高

SSG 静态站点生成

静态站点生成 (Static Site Generation)：构建时预生成所有 HTML 页面

优点

• 极致性能
• 高安全性(无服务器逻辑)
• 低成本(可托管在 CDN)

缺点

• 无法处理动态内容
• 大规模站点构建慢
• 内容更新需重新构建

ISG 增量静态生成

增量静态生成 (Incremental Static Generation)：SSG 的增强版，支持按需生成/更新静态页面

优点

• 保留 SSG 优势
• 支持动态更新
• 自动增量生成

缺点：

• 架构复杂
• 需要特定框架支持
• 缓存策略需精心设计

详细对比

特性	CSR	SSR	SSG	ISG
渲染位置	客户端	服务端	构建时	构建时+运行时
首屏速度	慢	快	最快	快
SEO	差	优	优	优
服务器负载	低	高	最低	中等
动态内容	实时	实时	静态	支持
构建时间	短	每次请求	长(内容多时)	中等
典型框架	React/Vue SPA	Vue/Nuxt.js	VuePress/Hugo	Next.js 9.3+
适用场景	后台系统/Web 应用	内容型网站	文档/博客	电商/新闻网站

适用场景建议

选择 CSR

• 需要丰富交互的管理后台
• 对 SEO 无要求的 Web 应用
• 已采用 PWA 的移动应用

选择 SSR

• 内容营销网站(需要 SEO)
• 用户首屏体验优先的场景
• 需要社交媒体分享预览

选择 SSG

• 技术文档/博客网站
• 产品展示页面
• 内容更新频率低的站点

选择 ISG

• 电商产品页面
• 新闻资讯网站
• 需要混合静态动态的内容

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24