SSR vs CSR
CSR (Client Side Rendering)#
1. 浏览器请求页面
用户在浏览器输入 URL,向前端服务器(比如 Nginx)发起请求
2. 服务器返回 HTML
Nginx 返回一个基础的 HTML 文件,包含:
- 基本的 HTML 结构
- 一个根节点 `<div id="root"></div>`
- 打包后的 JS 文件引用(包含了 React 库代码、您的应用代码等所有 JS 代码)
3. 浏览器下载 JS
浏览器解析 HTML 时发现 JS 文件引用,会下载这些文件,包括:
- React 库代码
- React DOM 库代码
- 其他依赖库代码
- 您的应用代码
(这些在生产环境通常会被打包成一个或多个文件)
4. 执行 JS 代码
浏览器按顺序执行下载的 JS 代码:
- 先执行 React 库代码,使浏览器具备运行 React 的能力
- 然后执行您的应用代码,这些代码会使用 React API 来创建和渲染组件
5. React 开始工作
React 代码执行后:
- 创建虚拟 DOM
- 将组件渲染到 `#root` 节点中
- 如果组件中有数据请求,会发起 API 请求
- 等待数据返回后更新组件显示
6. 最终渲染完成
- 页面展示完整内容
- 用户可以与页面交互
在这个过程中,用户可能会经历:1 完全空白阶段(等待 HTML 下载), 2 只有空 root div 的阶段(等待 JS 下载), 3 Loading 状态(JS 执行后,等待数据), 4 完整页面(数据获取完成) 这也就解释了为什么:
-
如果用户禁用了 JavaScript, 你的 React 应用将完全无法工作
-
首次加载会有白屏时间(等待 JS 下载和执行)
-
SEO不友好, 搜索引擎爬虫可能无法看到你的内容(因为它们可能不执行 JS)
-
对低端设备不友好(下载js代码, 执行js, 加载数据, 渲染页面都在客户端执行)
注意: Nginx 是个静态文件服务器, 类似 Apache, 我们使用 vite 打包 react 项目后, 会生成 index.html 根目录静态文件和对应的js包,
与静态服务器对应的是 云服务/CDN, 常见的如 Vercel, GitHub Pages, 阿里云 OSS
SSR (Server Side Rendering)#
浏览器请求页面
↓
服务器运行React代码
↓
服务器获取必要数据
↓
服务器生成完整HTML
↓
浏览器展示内容
↓
JS加载完成后接管页面
搜索引擎爬虫拿到的直接是完整的 HTML 内容,无需执行 JS, 并且 页面内容、元数据、结构都在首次响应中,爬虫可立即获取,
这也就是为什么说SSR拥有更快的首屏展示, 更好的SEO, 对低端设备友好, 更好的用户体验, 当然这也增加了服务器负载, 开发配置更复杂, 毕竟不是前后端分离,
常见的如 next.js (React 的一个框架) 默认就是 SSR, 当然你可以使用
use clien
来指明在客户端执行, 所以 next.js 是个混合的模式,纯 React 开发就是 CSR 咯
查看其他文章