性能优化之渲染方案ssr,ssg,csr

[wuyunqiang]

先有问题再有答案

1. ssr,ssg,csr 是什么?
2. 不同渲染框架下用户的访问路径有什么差异?
3. ssr,ssg,csr有什么优缺点
4. 分别适用哪些场景？

SSR（Server Side Rendering）：

服务器端渲染

是指在服务器端将页面渲染成HTML字符串并返回给客户端。

一图胜千言

1. 用户访问页面：用户在浏览器中输入URL，浏览器向服务器发送请求。

2. 服务器接收请求：服务器接收到用户的请求后，会根据请求的URL动态确定需要渲染哪个页面。

3. 获取数据：在Next.js中，我们可以使用getInitialProps或getServerSideProps等函数来在服务器端获取数据。这些函数会在服务器端运行，并且可以接收到请求的上下文（包括请求的参数、头部信息等），因此可以根据请求的信息来获取数据。

4. 渲染页面：服务器端获取到数据后，会将数据传递给React组件，然后使用React的renderToString函数将React组件渲染成HTML字符串。

5. 返回客户端：服务器将拼接好的HTML发送给客户端，客户端接收到HTML后，浏览器会解析HTML并显示页面。

6. 注水：在HTML中，Next.js会将服务器端获取到的数据以JSON的形式嵌入到一个script标签中，这个过程叫做注水。

7. 脱水：Next.js的运行时脚本会读取这个script标签中的数据，然后将数据传递给React组件，这个过程叫做脱水。

8. Hydration：React会对比服务器端渲染的HTML和 使用脱水得到的数据来渲染客户端的React组件，然后尽可能地复用服务器端渲染的HTML。这个过程可以提高性能，因为不需要重新生成和插入DOM元素, 同时绑定React会为客户端的React组件绑定事件处理函数。这样，当用户和页面进行交互时，就可以触发这些事件处理函数。

9. 激活页面：Hydration完成后，页面就被激活了，用户可以和页面进行交互。在这个过程中，如果用户触发了一些需要获取数据的操作，Next.js会在客户端获取数据，并更新页面。

SSG（Static Site Generation）：

静态网站生成

是指在构建阶段将页面渲染成HTML文件，然后将HTML文件部署到CDN上。用户访问页面时，服务器直接返回静态的HTML文件。

一图胜千言

1. 获取数据：在Next.js中，我们可以使用getStaticProps函数来在构建阶段获取数据。这个函数会在Node.js环境中运行，因此可以访问服务端数据库，或者请求其他服务端接口。获取到的数据会被传递给React组件。

2. 渲染React组件：Next.js会使用获取到的数据来渲染React组件。这个过程和在浏览器中渲染React组件的过程是一样的，只是运行环境不同。在这个过程中，React组件会被转化为HTML字符串。

3. 注水：Next.js会将获取到的数据以JSON的形式嵌入到HTML中，这个过程被称为注水。这样做的目的是为了将数据传递给客户端。

4. 生成静态文件：Next.js会将渲染出来的HTML字符串和注水的数据一起保存为静态文件，通常是.html文件。这些静态文件会被部署到CDN上。

5. 用户访问页面：用户在浏览器中输入URL，浏览器向服务器发送请求，服务端返回提前创建好的html给浏览器。

6. 脱水：和SSR一样，Next.js会在HTML中嵌入服务器端获取到的数据，然后在客户端提取出这些数据。

7. Hydration：Next.js会使用React的hydrate函数，将服务器端渲染的HTML和客户端的React组件进行对比，然后复用服务器端渲染的HTML。

8. 激活页面：Hydration完成后，页面就被激活了，用户可以和页面进行交互。

CSR（Client Side Rendering）

客户端渲染

是指在客户端使用JS来渲染页面。服务器只负责提供数据，所有的渲染工作都在客户端进行。

一图胜千言

1. 用户访问页面：用户在浏览器中输入URL，浏览器向服务器发送请求。
2. 服务器返回资源：服务器接收到请求后，会返回一个基础的HTML，这个HTML通常只包含一个空的div元素和一些JS脚本的引用。
3. 浏览器解析HTML：浏览器接收到HTML后，会开始解析HTML，并构建DOM树。因为HTML中只有一个空的div元素，所以这个过程非常快。
4. 浏览器下载JS文件：浏览器会开始下载HTML中引用的JS文件。这些JS文件包含了React库和React组件的代码。
5. 浏览器解析JS文件：当JS文件下载完成后，浏览器会开始解析JS文件，并执行其中的代码。在这个过程中，React会创建React组件，并将这些组件渲染到空的div元素中。
6. 获取数据：在CSR的架构下，数据通常是在客户端获取的。当React组件需要数据时，会发送AJAX请求到服务器，获取数据，然后使用这些数据来更新页面。
7. 更新页面：当数据返回后，React会使用这些数据来更新React组件，然后重新渲染页面。这个过程是动态的，可以在用户访问页面后的任何时刻进行。

方案对比

方案	csr	ssr	ssg
动态性	高	高	低
首屏性能	差	优	优
seo	差	优	优
成本	无	消耗服务端资源	构建阶段 成本较低

适用场景

SSR适合那些需要快速首屏加载和SEO的应用，如新闻网站、电商网站等。

SSG适合那些结构内容相对固定，不需要实时数据的应用，如博客网站、文档网站等。

CSR适合那些需要丰富用户交互，不需要SEO的应用，如Web应用、后台管理系统等。

补充

这里补充一个使用vue 2.7 使用ssg遇到的一个坑，在Hydration阶段如果客户端生成的dom&预渲染的静态dom不一致，在开发环境是会弃用预渲染的dom直接使用客户端生成的dom树来渲染的，但是在线上环境并不是这样 会直接使用静态的dom, 导致页面部分是静态的不能交互的。

具体代码patch_hydrate

这个坑大家需要注意下....