以下是现代前端渲染模式的核心概念、实现原理及差异分析，帮助你根据项目需求做出技术选型：

1. CSR (Client-Side Rendering)

• 概念：浏览器下载空 HTML 后，通过 JavaScript 动态渲染内容。
• 原理：
  • 服务器返回基础 HTML（无实际内容）和 JS Bundle。
  • 浏览器执行 JS，发起 API 请求获取数据。
  • 客户端完成 DOM 渲染（如 React/Vue 的 createRoot().render()）。
• 特点：
  • ✅ 首屏后交互流畅，适合复杂交互应用。
  • ❌ 首屏加载慢（需等待 JS 执行）、SEO 不友好。
• 场景：后台管理系统、交互密集型 Web App。

2. SSR (Server-Side Rendering)

• 概念：服务器生成完整 HTML 返回给浏览器。
• 原理：
  • 服务器收到请求时，实时执行 JS（如 React 的 renderToString()）。
  • 生成包含数据的 HTML 发送到浏览器。
  • 浏览器直接显示内容，随后“注水”（Hydrate）使页面可交互。
• 特点：
  • ✅ 首屏快、SEO 友好。
  • ❌ 服务器压力大（每次请求都渲染）、TTI（可交互时间）可能延迟。
• 框架：Next.js、Nuxt.js、SvelteKit。
• 场景：内容型网站（博客、新闻站）。

3. SSG (Static Site Generation)

• 概念：构建时预生成静态 HTML，直接通过 CDN 分发。
• 原理：
  • 代码构建时（npm run build）调用数据接口，生成静态 HTML。
  • 用户请求时直接返回预渲染文件（无需服务器计算）。
• 特点：
  • ✅ 性能极高（CDN 缓存）、安全性好（无服务端计算）。
  • ❌ 数据更新需重新构建。
• 框架：Gatsby、Next.js（getStaticProps）。
• 场景：文档站、营销页、内容不变的页面。

4. ISR (Incremental Static Regeneration)

• 概念：SSG 的增强版，支持增量更新静态页面。
• 原理：
  • 首次访问时返回预生成的静态 HTML。
  • 后台按配置周期（如 revalidate: 60）重新生成页面。
  • 新用户访问时获得更新后的页面。
• 特点：
  • ✅ 保留 SSG 性能优势 + 支持数据更新。
  • ❌ 更新有延迟（取决于 revalidate 周期）。
• 框架：Next.js（V9.5+）。
• 场景：电商产品页、资讯列表（需定期更新但非实时）。

5. PPR (Partial Prerendering)

• 概念：混合静态与动态渲染，优化动态页面体验（Next.js 14+ 实验性功能）。
• 原理：
  • 页面划分为静态框架（预生成）和动态组件（实时渲染）。
  • 用户访问时，静态部分立即展示，动态部分通过 Suspense 边界流式加载。
• 特点：
  • ✅ 首屏极快（静态框架优先）、动态部分无缝加载。
  • ❌ 需要框架深度支持（如 React Suspense）。
• 框架：Next.js（App Router + Vercel Edge Runtime）。
• 场景：动态页面仍需快速首屏（如用户仪表盘）。

关键差异总结

技术选型建议

• 追求极致性能/安全 → SSG（如博客、文档）。
• 需 SEO 且内容常更新 → SSR 或 ISR（如新闻站）。
• 动态交互为主 → CSR（如 Web 应用）。
• 混合静态与动态内容 → PPR（如用户中心）。
• 大规模内容站点 → ISR（如电商产品页）。

💡 框架支持：Next.js 是目前唯一同时支持 SSR、SSG、ISR、PPR 的全栈框架。根据需求组合使用这些模式（如关键页面 SSG + 用户面板 PPR）可最大化性能与用户体验。

视频资源

Next.js CSR vs SSR vs SSG vs ISR and now PPR! - YouTube