CSR, SSR, SSG

🧩 1. CSR（Client-Side Rendering）客户端渲染

代表框架：React、Vue（默认模式）、Docusaurus（默认）
核心思想：
👉 首次加载时服务器只返回一个空的 HTML 外壳（带 <div id="root"></div>）和 JS 文件。
👉 浏览器下载 JS 后在客户端执行 React 代码，动态生成 DOM 并渲染页面。

流程：

浏览器请求页面 → 服务器返回空 HTML + JS → 浏览器执行 JS → 渲染出内容

优点：

• 前端完全控制渲染逻辑，体验流畅（SPA）。
• 支持复杂的交互（无需刷新）。

缺点：

• 首屏白屏时间较长（需要加载 JS 才显示内容）。
• 不利于 SEO（搜索引擎抓不到 JS 动态内容）。

适用场景：

前后端完全分离的 SPA、仪表盘、管理后台。

🌐 2. SSR（Server-Side Rendering）服务器端渲染

代表框架：Next.js、Nuxt.js、Remix
核心思想：
👉 页面 HTML 在服务器端由 React 渲染生成，再发送给浏览器。
👉 浏览器收到完整 HTML 后快速展示内容，再“水合（hydrate）”绑定事件。

流程：

浏览器请求页面 → 服务器执行 React 渲染 → 返回完整 HTML → 浏览器展示页面并加载 JS → hydrate 交互

优点：

• 首屏加载快，SEO 友好。
• 动态内容（比如用户信息）可直接在服务器渲染。

缺点：

• 增加服务器压力（每次请求都渲染）。
• 部署复杂（需要 Node.js 服务器）。

适用场景：

内容动态、需要 SEO 的网站（如博客、新闻、商品页）。

🧱 3. SSG（Static Site Generation）静态站点生成

代表框架：Next.js（getStaticProps）、Docusaurus、Gatsby
核心思想：
👉 在 构建阶段（build time） 生成所有 HTML 文件。
👉 部署时直接是静态文件，访问速度极快。

流程：

npm run build → 生成 HTML 文件 → 部署静态文件服务器（如 Vercel、GitHub Pages）

优点：

• 性能极佳（CDN 缓存即可）。
• 无需服务器渲染（纯静态资源）。
• 极其安全。

缺点：

• 不支持频繁变化的动态内容。
• 需要重新构建才能更新页面。

适用场景：

文档网站（如 Docusaurus）、个人博客、产品官网。

🧭 总结对比