跳到主要内容

渲染策略基础概念

🧩 一、基础概念速览​

名称全称中文含义渲染位置首屏速度SEO友好场景特点
SPASingle Page Application单页应用客户端慢（需加载JS后渲染）差（需额外优化）前端逻辑强、页面切换快
CSRClient-Side Rendering客户端渲染浏览器慢（白屏期明显）差动态交互、API驱动页面
SSRServer-Side Rendering服务端渲染服务器快（首屏快）好动态内容、SEO需求
SSGStatic Site Generation静态站点生成构建阶段非常快很好内容少、静态博客、文档类

🧠 二、关系与层次理解​

可以把它们看作两组概念的组合关系：

       ┌──────────────┐
       │   SPA 应用   │ ←—— 单页应用结构
       └──────────────┘
               │
       ┌──────────────┐
       │  CSR  客户端渲染│ ←—— 默认SPA的渲染方式
       └──────────────┘

       ┌──────────────┐
       │ SSR 服务端渲染│ ←—— SPA的进化方向之一
       └──────────────┘

       ┌──────────────┐
       │ SSG 静态生成 │ ←—— SSR 的一种预渲染形式
       └──────────────┘

  • SPA 是应用结构：只有一个 HTML，所有内容靠 JS 动态切换视图。

  • CSR / SSR / SSG 是渲染方式：

    • CSR：运行时渲染（在浏览器中）。

    • SSR：请求时渲染（在服务器中）。

    • SSG：构建时渲染（提前生成静态 HTML）。

⚙️ 三、工作机制对比​

阶段CSRSSRSSG
构建阶段构建 JS Bundle可生成部分模板生成完整 HTML 文件
用户请求返回空 HTML + JS服务器运行 JS 模板生成 HTML直接返回静态 HTML
浏览器渲染JS 下载后执行再渲染HTML 直接展示，再激活 JSHTML 直接展示，再激活 JS
优点前后端分离简单首屏快，SEO好极快，CDN友好
缺点首屏慢，SEO差成本高，需Node服务器动态内容需重新构建

🔄 四、演化与混合模式​

现代框架如 Next.js / Nuxt / Remix / SvelteKit 都支持多种混合渲染：

模式含义使用场景
CSR + SSR 混合首页 SSR，其余页面 CSRSEO + 交互并重的产品
SSG + ISR（增量静态再生成）静态生成 + 后台自动更新博客、新闻站
SPA + CSR完全前端渲染Web App 类应用（如Gmail）

💡 五、类比理解​

类比对象渲染方式
CSR 像是一本“空白书”，读者拿到后浏览器用脚本填上内容。
SSR 像是服务器直接“打印好书”再寄给你。
SSG 像是提前印好成千上万本书，放在CDN上随时分发。
SPA 像是一本“会变形的书”，翻页时内容在前端动态切换，而不是换一本新书。

🧭 六、总结归纳​

类型代表框架构建工具
SPA (CSR)React / Vue / AngularVite / CRA
SSRNext.js / NuxtVite SSR Plugin
SSGAstro / Next.js (Static Export) / GatsbyVite / Webpack
混合Next.js / Remix / SvelteKitVite / Nitro