CSR的概念

CSR，即客户端渲染（Client-Side Rendering），是一种前端渲染方式。在CSR中，页面的渲染过程发生在用户的浏览器中，而不是在服务器端。这意味着，在CSR中，HTML文档最初只包含基本的骨架，而JavaScript文件则包含渲染页面所需的所有逻辑。

以一段简单的HTML代码为例

<html>
<head> 
   <title>北科大</title> 
</head> 
 
<body> 
     <div id="root"> </div> 
     <script src="./index.js"> </script> 
 </body>
 </html>

如果是客户端渲染，大致流程如下：

请求HTML和JavaScript文件：用户在浏览器中输入URL并按下回车，浏览器向服务器请求HTML文件。
接收HTML文件：服务器返回一个基本的HTML空页面。
下载JavaScript文件：浏览器解析HTML文件，发现其中引用了JavaScript文件，于是开始下载JavaScript文件。
执行JavaScript文件：浏览器执行JavaScript文件，例如代码中的./index.js这个文件包含了渲染页面所需的所有逻辑。客户端执行js代码进行渲染。
渲染页面： JavaScript执行完成后，它会生成页面的实际内容，并将其渲染到用户的浏览器上。用户最终看到的完整页面是在浏览器中生成的，而不是从服务器直接返回的。

CSR的优缺点

优点：

页面初始化后加载速度很快，响应迅速
减轻服务器压力，服务器只需提供基本的HTML结构和JavaScript文件，不用负责页面的具体渲染，减轻了服务器的压力。

缺点：

不利于SEO：搜索引擎爬虫难以获取到由JavaScript生成的内容，可能影响页面的SEO。
首屏渲染慢：如果JavaScript文件较大或者需要从远程服务器加载数据，会导致首屏渲染较慢，用户可能会在加载过程中看到空白页面或者加载指示器。
不利于性能优化：由于所有逻辑都在前端执行，可能需要处理大量数据和复杂的页面结构，性能优化相对复杂

SSR的概念

SSR 指的是服务器端渲染（Server-Side Rendering），是一种将网页的渲染过程从客户端转移到服务器端的技术。在传统的前端单页面应用（SPA）中，所有的页面渲染逻辑都是在浏览器中进行的，浏览器通过 JavaScript 请求数据并生成页面内容。而在 SSR 中，部分或全部页面的渲染过程是在服务器上完成的。

在 SSR 中，当用户发起请求时，服务器端会执行相应的页面渲染逻辑，生成完整的 HTML 页面，并将它发送给客户端浏览器。

所以用户在浏览器接收到页面时，已经包含了初始的渲染内容，而不是一个空的 HTML 文件，（利于SEO优化）浏览器不再需要等待 JavaScript 加载和执行，从而可以更快地显示页面内容，提高用户体验。

SSR具体过程如下：

服务器渲染HTML：服务器会根据访问的URL在服务端生成对应的HTML模板。这个HTML模板包含了该页面的真实内容，但不包含任何交互逻辑，比如DOM元素的点击事件等。
服务器将只有静态内容的HTML模板发送给客户端，同时，这个模板中也会包含对应的JavaScript执行脚本。
浏览器会下载这个HTML中的JavaScript脚本并执行，处理页面的静态HTML元素，并为它们添加相应的事件处理，确保页面具有交互性。为静态元素添加事件处理的过程又称为hydration

Hydration的理解

上面在将SSR渲染的过程中，提到了hydration的概念。在服务器提供给客户端HTML页面时，虽然用户已经可以看到具体内容，但是它们还不能进行交互。

在 SSR 中，服务器端会生成一个包含完整 HTML 结构和初次渲染数据的页面，并将这个 HTML 发送给浏览器。当浏览器接收到这个 HTML 时，用户已经可以看到具体内容，但是它们还不能进行交互。

随后客户端会执行Js脚本，并进行hydration，即将服务器端渲染的静态内容和客户端 JavaScript 中生成的动态内容进行合并，使其变得可交互。这个过程中，React 会比较客户端生成的虚拟 DOM 和已经在服务器端生成的 DOM，然后进行合并和事件绑定，以确保页面的交互性和一致性。

SSR同构应用

一套代码既可以在客户端运行，也可以在服务器运行的情况通常被称为“同构应用”。

SSR同构应用是一种将服务器端渲染（SSR）和客户端渲染（CSR）结合起来的开发模式。在SSR同构应用中，页面在服务器端首次渲染，然后在客户端接管，实现后续的交互和页面更新。这种模式充分利用了SSR的优势，例如提高首屏加载速度和SEO（搜索引擎优化），同时又保留了客户端渲染的优点，例如交互性和动态更新。

在SSR同构应用中，页面的初始渲染发生在服务器端。当用户访问应用时，服务器会根据用户的请求动态生成页面，将页面的HTML内容和初始数据一同发送到客户端。客户端在接收到这份HTML内容后，会先显示出一个完整的页面

随后，客户端下载并执行具体的js文件。一旦JavaScript代码在客户端执行，它会接管页面的交互，并且应用的行为将与传统的单页面应用（SPA）类似。例如，用户的点击、表单提交等交互行为将触发前端路由变化或异步数据请求。

SSR同构应用的主要目标是结合SSR和CSR的优势，提供更好的用户体验和更好的性能。SSR保证了首屏加载的快速渲染和SEO，而CSR则提供了更好的交互体验。

SSR优缺点

优点：

更快的页面加载速度：由于初始 HTML 是在服务器上生成的，用户在浏览器中接收到的页面已经包含了内容，不需要等待 JavaScript 的加载和执行，因此页面加载速度更快。
更好的搜索引擎优化（SEO）：搜索引擎爬虫能够看到完整的页面内容，不依赖于 JavaScript 的执行，有助于提高网站在搜索引擎中的排名。
更好的性能表现： SSR 通常可以减轻客户端的工作负担，因为一部分页面的渲染逻辑已经在服务器上执行，客户端主要负责交互和更新动态内容。

缺点：

服务器压力较大： SSR需要服务器动态生成HTML，因此会增加服务器的压力，特别是在大量用户访问时。
不适用于某些交互复杂的应用：对于交互非常复杂的应用，SSR可能无法完全满足需求，需要在客户端使用JavaScript进行进一步的交互和更新。

React中CSR与SSR