一、概念理解：服务端渲染、客户端渲染、同构
1.客户端渲染（图示来源： fullstackacademy）
- 当浏览器向服务器发出HTTP请求后，服务端生成并发送一个html文件作为响应
- 浏览器在解析加载html文件过程中，会加载并执行javaScript文件
- 当浏览器执行到包含React代码的JavaScript文件时，React库开始初始化，并根据代码中的组件定义创建虚拟DOM树
- React根据虚拟DOM树的描述，将其插入到页面合适的位置，并将虚拟DOM转换成真实的html元素渲染到页面上
- 客户端CSR渲染详细流程图（图示来源： github.com/yacan8/blog...）
2.服务端渲染（图示来源： fullstackacademy）
- 当浏览器向服务器发出HTTP请求
- 服务器接收到请求后，根据请求的URL和路由配置决定要渲染的页面，并使用服务器端的渲染引擎生成 静态的Html内容
- 服务器通常需要在渲染过程中获取组件所需的数据，生成 静态的html 后，将 HTML字符串 包装在HTTP响应中，并发送给浏览器
- 浏览器可以将服务器生成的 HTML（初始页面） 显示出来，而不需要等待JavaScript的下载和执行，此时开始下载JavaScript
- 从而，提升了初次加载页面体验
暂时无法在飞书文档外展示此内容
- 服务端SSR渲染详细流程图（图示来源： github.com/yacan8/blog...）
3.React同构（特殊的SSR：客户端渲染和服务器端渲染的整合）
- React同构的流程与SSR类似，服务器也负责生成初始的HTML内容，包括页面的 静态内容和React组件 。
- 浏览器接收到HTML响应后，开始解析HTML并构建DOM树。用户可以立即看到页面的初始内容，无需等待JavaScript加载。
- 与SSR不同的是 ，在React同构中，浏览器在 解析HTML期间就开始下载JavaScript文件 ，并在 解析HTML的过程中执行JavaScript代码 。这意味着 JavaScript的加载和执行与页面渲染并行 进行。
- 一旦JavaScript文件下载并执行完毕，事件处理程序会被绑定到相应的DOM元素上，从而实现页面的交互性。
关键区别：
- 在传统的SSR中，HTML只包含了静态内容，没有与React组件相关的信息，因此浏览器无法立即加载和执行与组件交互相关的JavaScript。
- 在React同构中，HTML中包含了虚拟DOM的描述，这些描述在浏览器端可以立即转化为真实的DOM元素，同时浏览器也可以根据这些描述知道需要加载哪些JavaScript文件。因此，浏览器可以在解析HTML和DOM的同时开始下载和执行JavaScript代码，实现更快的页面加载和交互。
- React同构中：服务器端渲染的HTML中会包含与客户端JavaScript的相关信息，以便浏览器能够立即启动JavaScript并继续页面的交互和渲染
4.服务端渲染的利弊
-
服务端渲染的优势
-
利于搜索引擎优化SEO：SEO 原理是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
- 服务端渲染对于低级爬虫的兼容性更好，可以为以搜索引擎为主要流量入口的项目提供流量(低级爬虫：只请求URL，爬取返回的HTMl；高级爬虫：请求URL并加载执行JS，抓取JS渲染后的内容)
-
缩短 TTFP（Time To First Page）时间：初次加载白屏时间更短
- 服务端渲染：在浏览器请求URL之后已经得到了一个带有数据的HTML文本，浏览器只需要解析HTML，直接构建DOM树，用户就可以看到页面
- 客户端渲染：先得到一个空的HTML页面，页面进入白屏，之后需要加载并执行 JavaScript、请求后端服务器获取数据、渲染页面，用户才可以看到页面
-
-
服务端渲染的缺点
-
代码复杂度增加、可维护性降低
- 为了实现服务端渲染， 应用代码中需要兼容 服务端 和 客户端 两种运行情况，而 一部分依赖的外部扩展库却只能在客户端 运行，需要对其进行特殊处理，才能在服务器渲染应用程序中运行
-
需要更多的负载均衡服务器
- Node.js服务，从 只需输出静态的资源文件 的工作，增加了 数据获取的I/O 、 渲染HTML ；流量的暴增会增加服务器负担，因此需要应用相应的缓存策略和准备服务器负载
-
构建设置和部署的额外要求
-
5.React中的服务端渲染SSR（同构）
-
同构的理解： 让一份代码，既可以在服务端中执行，也可以在客户端中执行，并且执行的效果都是一样的，都是完成这个html的组装，正确的显示页面；
-
同构的实现：本质上得益于React的虚拟Dom
- React 框架中引入了一个概念叫做虚拟 DOM，虚拟 DOM 是真实 DOM 的一个 JavaScript 对象映射，React 在做页面操作时，实际上不是直接操作 DOM，而是操作虚拟 DOM，也就是操作普通的 JavaScript 对象，这就使得 SSR 成为了可能。
- 服务器，操作 JavaScript 对象，判断环境是服务器环境，我们把虚拟 DOM 映射成字符串输出；
- 在客户端，操作 JavaScript 对象，判断环境是客户端环境，就直接将虚拟 DOM 映射成真实 DOM，完成页面挂载。
-
在React实现SSR技术架构图（图片来源： zhuanlan.zhihu.com/p/47044039/...）
参考文献：