前端页面渲染方式梳理

分类	传统SSR：服务端渲染	现代SSR：服务端渲染	CSR：客户端渲染	SSG：静态站点生成	边缘渲染
描述	最古老的方式。使用后端模板引擎（如 JSP, PHP, EJS）直接拼接数据和模板，生成完整 HTML。每次页面跳转都需要重新加载整个页面。	为了解决单页面应用的首屏加载慢和 SEO 问题而生。通常与 SPA 结合使用。首次访问时，服务器执行 JavaScript 框架（如 React, Vue）的代码，生成 HTML 并返回。之后的交互再由客户端接管（即“同构”或“通用”应用）。	这是现代 SPA 的默认渲染方式。服务器只提供一个容器（如 <div id="root"></div>），所有渲染逻辑、路由、数据获取都在浏览器端完成。是前端开发中最常见的渲染方式。在这种模式下，服务器主要负责提供静态的HTML文件（可能包含一些基本的HTML结构和JavaScript脚本），而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。	在构建时（而非运行时）就预先将页面渲染成 HTML 文件。这些静态文件可以被部署到 CDN，实现极快的访问速度。	将 SSR/SSG 的工作从中心化的服务器转移到全球分布的边缘网络上。它在离用户最近的边缘节点上执行渲染逻辑，极大降低了延迟。
流程	浏览器请求 → 服务器处理数据、渲染HTML → 返回完整HTML → 浏览器渲染	浏览器请求 → Node.js 服务器运行 React/Vue 代码 → 生成 HTML → 返回HTML + “水合”用的JS → 浏览器加载JS后进行“水合”，使页面可交互	浏览器请求 → 服务器返回空HTML和JS → 浏览器下载并执行JS → JS 调用API获取数据 → JS 渲染页面	代码提交 → 构建工具（如Vite, Webpack）执行应用代码 → 生成静态HTML/CSS/JS文件 → 部署到服务器/CDN → 用户请求直接返回静态文件	用户请求 → 请求到达最近的边缘节点 → 边缘节点运行JavaScript代码（如React组件）→ 生成HTML → 返回给用户
适用场景	网站，对SEO要求高。	需要SEO和丰富交互的Web应用，社交网络、电商网站，充值中心，消息中心	后台管理系统、Dashboard等 无需SEO，追求极致的交互体验和开发效率	博客、文档、官网 内容更新不频繁、对性能要求高 内容频繁变化可用 SSG + ISR	对全球访问速度要求极高的应用
SEO	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
首屏加载	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
服务器负载	高	高	低	极低	分布到边缘，中心负载低
缓存效率	低	中等	高（JS和API）	极高（整个页面）	极高（分布式缓存）