网页渲染的两条赛道
CSR vs SSR：网页渲染的两条赛道
什么是CSR和SSR？
CSR(客户端渲染)是将渲染工作交给浏览器的JavaScript完成；而SSR(服务器端渲染)则是在服务器上完成HTML的生成工作，直接将渲染好的页面发送给浏览器。
🏭 生活类比：想象两家家具公司的不同销售模式
- CSR = 宜家模式：顾客拿到的是一个包装盒和说明书(HTML框架+JavaScript)，回家后需要自己动手组装(浏览器加载JS并渲染页面)
- SSR = 传统家具店：顾客拿到的是已经组装好的成品家具(完整HTML)，可以立即使用(浏览器直接展示)
渲染流程对比
CSR渲染流程
┌────────────┐ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ 浏览器请求 │───►│ 服务器返回最小 │───►│ 浏览器加载JS │───►│ JS获取数据并 │
│ 页面 │ │ HTML和JS包 │ │ 框架代码 │ │ 渲染完整页面 │
└────────────┘ └───────────────┘ └───────────────┘ └───────────────┘│┌───────────────────────────────────────────┘▼┌──────────────┐│ 页面可交互 │└──────────────┘
SSR渲染流程
┌────────────┐ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ 浏览器请求 │───►│ 服务器获取数据 │───►│ 服务器渲染 │───►│ 浏览器接收完整│
│ 页面 │ │ 和页面状态 │ │ 完整HTML │ │ HTML并展示 │
└────────────┘ └───────────────┘ └───────────────┘ └───────────────┘│┌───────────────────────────────────────────┘▼┌──────────────┐│ 加载JS使页面 ││ 可交互(激活) │└──────────────┘
深入理解：餐厅类比
🍽️ CSR就像"自助餐厅"：
- 顾客进店后先找座位(加载最小HTML)
- 然后拿托盘去取餐(浏览器执行JS)
- 逐一挑选自己想要的食物(API获取数据)
- 最后才能开始享用美食(页面完成渲染)
- 优点：可以按自己的喜好和节奏取餐
- 缺点：从进门到开始吃需要一定时间
🍽️ SSR就像"传统餐厅"：
- 顾客点餐后，厨师在后厨准备好所有菜品(服务器渲染)
- 服务员将已经摆盘好的菜直接端到桌上(返回完整HTML)
- 顾客一坐下就能立即看到食物(首屏展示快)
- 但如果要换菜或加菜，需要重新叫服务员处理(页面跳转)
代码示例：同一个应用的两种实现
1. CSR实现 (React)
// index.html - 最小HTML
<!DOCTYPE html>
<html>
<head><title>我的应用</title>