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 咯