服务端渲染(SSR)、客户端渲染(CSR)、同构

SSR（Server side Render）：客户端发送请求，服务端执行相应的js代码把请求的页面与数据拼接好后返回给客户端，客户端调用模板引擎进行解析渲染成页面。https://blog.csdn.net/jal517486222/article/details/107809945
疑问：服务器渲染不会遇到ajax请求吗？
如果有link标签、script标签，浏览器还是会发送请求加载文件。

image.png

CSR(Client side Render)：客户端渲染简单理解就是浏览器发送页面请求，服务器返回的是一个HTML模板页面，浏览器从上至下解析模板过程中如果遇到ajax，就会发送ajax请求获取数据，最后再调用模板引擎（art-template等）与数据拼装，以DOM的形式插入到HTML页面中。第一步拿到的是静态页面，第二步拿到的是动态数据。
客户端渲染因为数据是异步获取，所以在展示完整页面的过程中最少发起两次请求，数据是动态的添加到页面中，因此，非常不利于SEO，便于前后端分离开发。现如今前端采用Vue等框架开发非常多见，因此为了解决纯客户端渲染面临的问题，很多类似Vue中使用SSR和前后端同构的思想也非常常见。

image.png

客户端渲染为什么至少有2次http请求？

第一次向服务器发送请求获取的是HTML字符串，拿到后浏览器会进行解析。
解析过程中，遇到ajax请求，会再次向服务器发送请求获取数据，拿到数据后，模板引擎渲染页面。

http://www.manongjc.com/article/118503.html
https://juejin.im/post/6844903892984004615#heading-4
SSR与CSR的优缺点比较：
SSR优点:

首屏渲染速度快；
有利于SEO，因为返回的是整个HTML页面，有利于爬虫获取数据。多见于电商网站商品信息获取。
节能。

缺点：

不易维护。
容易导致服务端的压力比较大。可以使用服务端缓存技术减轻服务端的压力。

CSR优点：

网络传输数据量小。
可以减小服务端的压力。
无需每次去请求完整页面。

缺点：首屏渲染速度慢、不利于SEO、爬虫不能爬取到完整的HTML代码。如果一个项目的流量入口来自搜索引擎，用CSR就非常不合适了。
为什么CSR的首屏渲染速度会慢？
CSR 项目中 TTFP （Time To First Page）时间比较长，在 CSR 的页面渲染流程中，首先要加载 HTML 文件，之后要下载页面所需的 JavaScript 文件，然后 JavaScript 文件渲染生成页面。在这个渲染过程中至少涉及到两个 HTTP 请求周期，所以会有一定的耗时，这也是为什么大家在低网速下访问普通的 React 或者 Vue 应用时，初始页面会有出现白屏的原因。