🎓 Web前端框架技术 实验一·代码仓库: se3306-exp1
CSR / SSR / SSG 核心渲染机制深度对比系统
基于 React 18 与 Next.js 边缘计算架构，通过真实网络请求与渲染流水线评测，直观展现客户端渲染、服务端实时渲染与静态预生成的底层差异。
CSR (客户端渲染)SPA 经典架构
Client-Side Rendering
服务器下发空骨架 HTML 和 JS 脚本包，浏览器下载后在客户端执行数据请求并动态绘制 DOM。
• 渲染位置: 用户浏览器
• 首屏空白期: 较长 (依赖 JS 执行)
• SEO 友好度: 差 (爬虫获取空壳)
SSR (服务端渲染)Edge 动态实时
Server-Side Rendering
每个请求到达服务器/边缘计算节点时动态执行 React 渲染流程，直接输出带有实时业务数据的 HTML。
• 渲染位置: 服务端 / Cloudflare Edge
• 首屏内容绘制: 极快 (瞬时呈现有效内容)
• SEO 友好度: 极佳 (HTML 完整可读)
SSG (静态站点生成)CDN 极致性能
Static Site Generation
在项目构建阶段提前烘焙出所有 HTML/CSS 静态物理文件，直接由全球 CDN 节点进行物理缓存分发。
• 渲染位置: 构建编译阶段 (Build Time)
• 首字节时延: 极致低 (CDN 直出 < 20ms)
• 服务端压力: 零开销 (纯静态物理命中)
⚡ 实时性能基准实测 (Live Network Benchmark)
点击下方按钮，浏览器将分别向三种渲染模式的页面发起真实 HTTP 请求并统计首字节时间 (TTFB) 与初始 HTML 负载。
| 渲染模式 | 路由路径 | 首字节时延 (TTFB) | 完整下载用时 | HTML 体积 | 初始 HTML 是否含真实业务内容 | 评测状态 |
|---|---|---|---|---|---|---|
| CSR (客户端渲染) | /csr | - | - | - | - | 待测 |
| SSR (服务端渲染) | /ssr | - | - | - | - | 待测 |
| SSG (静态生成) | /ssg | - | - | - | - | 待测 |
📊 CSR / SSR / SSG 核心技术特性综合对比表
依据 Web 前端架构设计原理与工程实践，全面对比三种模式在各维度的技术优劣。
| 评测维度 | CSR (客户端渲染) | SSR (服务端渲染) | SSG (静态站点生成) |
|---|---|---|---|
| 渲染位置与时机 | 浏览器运行时执行 JS 生成 DOM | 服务端/边缘节点接收请求时动态渲染 | 构建编译阶段 (Build Time) 预先生成 |
| 首屏白屏时间 (FP/FCP) | 较慢（需等待 HTML + JS + API） | 快（浏览器直出完整 HTML） | 极快（CDN 物理缓存瞬间响应） |
| 首字节时间 (TTFB) | 快（静态空 HTML 文件） | 中等（需服务端计算与数据装配） | 极致（CDN Edge 直接命中） |
| SEO 友好程度 | 较差（大部分传统爬虫无法执行 JS） | 优秀（HTML 包含完整正文与 Meta） | 优秀（HTML 完整且响应极快） |
| 数据实时新鲜度 | 高（客户端随时轮询或长连接刷新） | 高（每次页面请求实时查询最新数据） | 低（需重新触发构建打包发布） |
| 服务器算力消耗 | 极低（纯静态分发，算力在客户端） | 高（每次请求均占用 CPU/内存计算） | 零（纯静态文件无动态后端算力） |
| 离线缓存支持 (PWA) | 极佳（结合 ServiceWorker 全站离线） | 中等（依赖复杂的数据同步缓存） | 极佳（纯静态资源天生支持离线） |
| 工程典型适用场景 | 企业内部管理后台、SaaS、高交互应用 | 个性化新闻资讯、实时电商详情、社交社区 | 企业官网、博客文库、产品文档、帮助中心 |
📝 实验总结与工程选型建议
1. 不存在绝对最优的渲染范式： 每种渲染方式都是在首屏性能、数据新鲜度、服务器负载与 SEO 诉求之间所作出的权衡取舍（Trade-off）。
2. 现代前端的混合架构趋势： 随着 Next.js、Nuxt 等现代元框架的发展，当前工业界最佳实践不再是非黑即白的二选一，而是采用混合渲染 (Hybrid Rendering / Islands Architecture)：关键着陆页采用 SSG 保证秒开与 SEO；个性化资讯采用 SSR 动态直出；富交互的用户操作仪表盘则无缝嵌入 CSR 客户端组件。