CSR/SSR/SSG

一、核心概念与差异维度CSR客户端渲染SSR服务端渲染SSG静态站点生成HTML生成时机浏览器运行时由JS动态生成每次用户请求时在服务端实时生成项目构建Build时预先生成比喻自助餐厅——客户端自己取数据、自己渲染现点现做——服务器实时烹饪预制便当——提前做好直接上桌SEO友好度差爬虫难以抓取动态内容极佳HTML直接返回极佳完全静态HTML首屏加载速度较慢需下载并执行JS快服务端直出HTML极快CDN直接分发服务器压力低计算在客户端高每次请求都要渲染极低只需文件服务二、CSR客户端渲染工作原理服务器返回一个几乎为空的HTML外壳和JavaScript文件浏览器下载并执行JS后动态获取数据并渲染页面。典型的单页应用SPA如Vue、React默认采用此模式。优点交互体验流畅页面切换无需刷新体验接近原生应用服务器成本低渲染工作转移到客户端减轻服务器负担部署简单只需静态文件服务即可部署缺点首屏加载慢用户需等待JS下载、解析和执行完成才能看到内容SEO不友好搜索引擎爬虫难以抓取JS动态生成的内容白屏时间长JS加载执行期间用户看到空白页面适用场景后台管理系统、个人仪表盘、强交互应用等不需要SEO的场景。例如登录后的个人资产页面直接用CSR即可。三、SSR服务端渲染工作原理用户请求页面时服务器实时获取数据并生成完整的HTML直接返回给浏览器。浏览器拿到的是已经填充好内容的页面。优点SEO友好搜索引擎可直接抓取完整HTML内容首屏加载快用户能更快看到内容减少空白时间支持个性化可根据请求参数、用户登录状态等动态生成内容缺点服务器负载高每次请求都需要服务端渲染增加计算成本实现复杂需要Node.js服务器运行环境部署和维护成本更高响应时间受网络影响TTFB首字节时间取决于服务器计算耗时适用场景需要SEO且内容实时变化的页面如电商商品详情页价格/库存频繁变动、新闻文章、个股详情页等。四、SSG静态站点生成工作原理在项目构建时预先生成所有页面的静态HTML文件部署到CDN后直接分发。用户请求时服务器直接返回已生成的静态文件。优点性能极佳静态文件通过CDN分发加载速度极快服务器压力极低只需提供文件服务无需实时计算安全性高没有服务端执行环境攻击面小缺点内容更新需重新构建页面内容变化时需要重新构建并部署不适合频繁变化的内容如社交动态、个性化页面等构建时间随页面数量线性增长页面过多时构建耗时显著增加适用场景内容相对静态、更新频率低的页面如博客文章、产品文档、企业官网、营销落地页等。五、如何选择决策建议场景推荐方案理由静态官网、文档站点SSG内容稳定性能极致博客、资讯列表内容偶尔更新ISR增量静态再生兼顾静态性能与内容新鲜度电商详情页价格/库存频繁变动SSR需要SEO且数据实时后台管理系统、个人中心CSR无需SEO交互复杂核心理念混合使用现代框架如Next.js的强大之处在于支持在同一个项目中混合使用多种渲染模式。你可以根据页面特性灵活选择首页/落地页 →SSG极致体验博客列表页 →ISR兼顾更新与性能商品详情页 →SSR保证实时性管理后台 →CSR专注交互一句话总结能用静态用静态SSG需要实时用服务端SSR只要交互用客户端CSR。