这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

CSR SSR SSG

CSR

客户端渲染(Client-Side Rendering)。常见 B 端 WEB 应用开发模式，前后端分离,服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的 HTML 用户在后续访问操作

客户端渲染

（摘自：blog.csdn.net/weixin_4253…

从图中的内容可以很清晰的总结客户端渲染的流程如下 :

1、用户输入地址，客户端向服务器发送请求

2、服务器将页面的相关代码原封不动的传递给浏览器

3、浏览器解析文件

4、遇到ajax请求则向服务器再次请求一些数据

5、服务器再次向浏览器发送相应的数据

6、浏览器拿到ajax请求返回的数据后，将数据渲染在页面上

那么在这个过程中就不可避免的多使用至少一次的请求给后台，所以在浏览器的首屏加载页面的速度的话会有些延迟，对用户的感受就显得稍微不友好了。因此就会有了服务端渲染（SSR）选择的出现了。 （原文链接：blog.csdn.net/m0_47434144…

SSR（Server-Side Rendering）

c端开发

服务端渲染

（摘自：blog.csdn.net/weixin_4253…

从图中的内容可以很清晰的总结服务端渲染的流程如下：

1、客户端向服务器发送一次请求

2、服务器接收请求，将页面所需的数据进行统一处理

3、当页面结构和数据处理并渲染完毕后，发送给客户端

4、客户端接收服务器发送过来的网页文件，不需要做任何操作，直接呈现

那么这个过程中相比较于客户端渲染，至少就减少了一次请求，渲染页面的速度也就相应的加快了。 （原文链接：blog.csdn.net/m0_47434144…

同构SSR

同构的意思就是客户端做的事情服务端也会原封不动的做一遍，

SSG（Static Site Generation）

用于静态页面的渲染方式，构建时生成完整的html页面，无需服务端请求处理，服务器响应快，非常快就可以看到展示的页面。

渲染流程如下图所示：
浏览器端向前端服务请求html资源，前端服务将已经打包好的，具有全部dom的html返回给浏览器端，进行解析、构建dom树等操作。

（摘自：blog.csdn.net/weixin_4253…

理解 以上提到的爬虫就是我们的搜索引擎，每一次我们的搜索她都会去爬取我们这些网页的内容，从而通过网页的关键词来，进行搜索排名，这时候就会体现出SSR、SSG的优势，这两种渲染，他们返回的内容当中就会包含我们的元素节点，对于排名就有利（就是嗦，我们要最大程度的曝光自己辣），但是CSR的返回内容当中是不会包含这些信息的，就不利。