服务端渲染（SSR）与客户端渲染（CSR）

一、传统服务端渲染（SSR）

原理

流程：
- 客户端发送 HTTP 请求。
- 服务端通过模板引擎（如 EJS、JSP）拼接数据与 DOM，生成完整 HTML。
- 服务端返回静态 HTML，客户端直接渲染。
技术代表：ASP、JSP、PHP、EJS。

优点

首屏速度快：无需等待 JS 加载，直接显示内容。
SEO 友好：搜索引擎可直接抓取完整 HTML。
服务端压力小：渲染由服务端完成，客户端仅展示。

缺点

维护困难：前后端逻辑耦合，代码复用性低。
用户体验差：页面跳转需重新加载，交互不流畅。
开发效率低：前后端分离不彻底，协作成本高。

二、现代服务端渲染（同构渲染）

核心概念

同构：同一套代码在服务端（Node.js）和客户端运行，实现“预渲染+注水化”。
技术代表：Vue SSR（Nuxt.js）、React SSR（Next.js）。

原理

流程：
- 客户端发起请求。
- 服务端运行 Vue/React 应用，生成虚拟 DOM 并转为 HTML 字符串。
- 服务端返回 HTML，客户端激活 JS 后绑定事件（注水化）。
关键点：
- 预渲染：服务端生成首屏 HTML，解决首屏白屏问题。
- 注水化：客户端接管交互逻辑，实现动态更新。

优点

首屏优化：首屏内容由服务端快速生成，无需等待 JS。
SEO 友好：搜索引擎可抓取预渲染的 HTML。
代码复用：前后端共享组件和逻辑，降低维护成本。
框架支持：Nuxt.js（Vue）、Next.js（React）提供开箱即用方案。

缺点

服务端压力：需 Node.js 服务支撑，高并发下资源消耗大。
复杂度：需处理服务端与客户端的生命周期差异。
第三方库适配：部分库可能依赖浏览器 API，需特殊处理。

三、客户端渲染（CSR）

原理

流程：
- 客户端发起请求。
- 服务端返回空 HTML + JS 文件。
- 客户端加载 JS，通过 Ajax 请求数据，动态渲染 DOM。
技术代表：Vue、React、Angular（SPA 模式）。

优点

交互流畅：页面跳转无刷新，用户体验接近原生应用。
前后端分离彻底：服务端仅提供 API，开发效率高。
动态更新：适合高频数据交互的场景（如社交、管理后台）。

缺点

首屏慢：需加载 JS 并请求数据，用户可能看到白屏。
SEO 困难：搜索引擎难以抓取 JS 生成的内容。
依赖前端性能：低端设备可能卡顿。

四、对比与选型建议

维度	传统 SSR	现代 SSR（同构）	CSR
首屏速度	快	快	慢
SEO	友好	友好	不友好
开发效率	低（前后端耦合）	中（需 Node.js）	高（前后端完全分离）
维护成本	高	中	低
适用场景	官网、电商列表页	需要 SEO 的首屏、内容型网站	管理后台、社交应用

优化方向

CSR 优化：
- 代码分割：按路由/组件拆分 JS，减少首屏加载量。
- 预加载：利用<link rel="preload">提前加载关键资源。
- 骨架屏：首屏加载时显示占位内容，提升感知速度。
- 服务端渲染混合：对关键页面采用 SSR，其他页面 CSR。
现代 SSR 优化：
- 缓存：对不常变更的页面缓存 HTML，减少服务端渲染耗时。
- 流式渲染：分块传输 HTML，优先显示首屏内容。
- Node.js 集群：通过集群部署提升并发能力。

五、总结

优先选 CSR：若项目注重交互体验、无需 SEO（如内部系统），或首屏内容可通过懒加载优化。
优先选现代 SSR：若需兼顾 SEO 与动态交互（如电商、新闻网站），且能接受服务端复杂度。
传统 SSR：仅在 legacy 系统维护时使用，新项目建议直接采用现代 SSR 框架（如 Nuxt.js/Next.js）。