同构渲染

传统的服务端渲染

sequenceDiagram
用户->>客户端: 1. 输入URL访问
客户端->>服务端: 2. 发送HTTP请求
服务端->>数据库: 3. 查询数据
数据库->>服务端: 4. 返回数据
服务端->>服务端: 5. 模板渲染(数据+HTML模板)
服务端->>客户端: 6. 返回完整HTML
客户端->>用户: 6. 直接展示页面

客户端渲染(CSR)

sequenceDiagram
用户->>客户端: 1. 输入URL访问
客户端->>服务端: 2. 发送HTTP请求
服务端->>客户端: 3. 返回“空壳”HTML(含基本结构+JS/CSS链接)
客户端->>客户端: 4. 浏览器解析HTML
客户端->>服务端: 5. 请求主JS文件
服务端->>客户端: 6. 响应主JS文件
客户端->>客户端: 7. 主JS文件掌权
客户端->>服务端: 8. ajax请求
服务端->>数据库: 9. 查询数据
数据库->>服务端: 10. 返回数据
服务端->>客户端: 11. 响应数据
客户端->>客户端: 11. JS动态渲染DOM
客户端->>用户: 11. 页面内容生成

同构渲染(SSR)

sequenceDiagram
用户->>客户端: 1. 输入URL访问
客户端->>服务端: 2. 发送HTTP请求(第1次)
服务端->>数据库: 3. 查询数据
数据库->>服务端: 4. 返回数据
服务端->>服务端: 5. 将数据序列化到HTML中(脱水)
服务端->>客户端: 5. 返回完整的HTML结构
客户端->>用户: 6. 首屏渲染
客户端->>客户端: 7. JS激活进行接管(注水)
客户端->>服务端: 8. 第2~n次请求(ajax)