前端SSR（Server-Side Rendering）是什么

Posted on Views:

SSR 全称（Server-Side Rendering）服务端渲染
核心思想：

HTML 页面在服务器生成，然后再返回给浏览器。

而不是浏览器拿到空页面后再自己渲染。

1.SSR 与 CSR 区别

1.1 CSR（客户端渲染）

传统 SPA：

1
2
3
4
5
Browser
 ├── 下载 JS
 ├── 执行 JS
 ├── 请求 API
 └── 渲染页面

例如：

  • React SPA
  • Vue SPA
  • 前后端分离

页面首次返回：

1
<div id="app"></div>

真正内容靠 JS 动态生成。

1.2 SSR（服务端渲染）

SSR：

1
2
3
4
5
6
7
Client Request
      ↓
Server Render HTML
      ↓
Return Full HTML
      ↓
Browser Display

浏览器第一次收到：

1
2
<h1>文章标题</h1>
<p>正文内容</p>

已经是完整页面。

2.SSR 架构流程

2.1 CSR 流程

sequenceDiagram

participant B as Browser
participant S as Static Server
participant A as API Server

B->>S: GET /
S-->>B: index.html + app.js

B->>A: GET /api/data
A-->>B: JSON

B->>B: JS渲染DOM

特点：

  • 首屏慢
  • SEO 差
  • JS 依赖重

2.2 SSR 流程

sequenceDiagram

participant B as Browser
participant W as Web Server
participant A as API Server

B->>W: GET /

W->>A: 获取数据
A-->>W: JSON

W->>W: 生成HTML

W-->>B: 完整HTML

B->>B: Hydration

3.SSR 的核心价值

3.1 首屏速度快

SSR：请求 → 直接看到内容

CSR：请求 → 下载JS → 执行 → 请求API → 渲染

因此：

  • FCP 更快
  • LCP 更快

3.2 SEO 更好

搜索引擎：更容易抓取完整HTML

3.3 低端设备体验更好

因为：浏览器计算量减少

适合：

  • 手机
  • IoT
  • Embedded UI

4.SSR 缺点

4.1 服务端压力增加

CSR：浏览器负责渲染

SSR：服务器负责渲染

因此：

  • CPU 消耗增加
  • 内存压力增加
  • 并发能力下降

4.2 架构复杂

SSR 要考虑：

  • Hydration
  • 服务端状态同步
  • 路由同步
  • Streaming
  • Cache
  • Edge Rendering

5.SSR / CSR / SSG 对比

模式 渲染位置 SEO 首屏速度 服务端压力
CSR 浏览器 差 慢 低
SSR 服务端 好 快 高
SSG 构建阶段 非常好 非常快 极低

6.SSG（Static Site Generation）

Static Site Generation

SSG：

1
构建时提前生成HTML

例如：

1
npm run build

生成：

1
2
3
about.html
post1.html
post2.html

然后：

1
Nginx直接返回静态HTML

性能极强。

7.现代 SSR 框架

7.1 React

框架 特点
Next.js React SSR事实标准

官网：

Next.js Official Website

7.2 Vue

框架 特点
Nuxt Vue SSR生态核心

官网：

Nuxt Official Website

7.3 Svelte

框架 特点
SvelteKit 编译型 SSR

官网：

SvelteKit Official Website