SSR及CSR

SSR及CSR

SSR - Serve side render 服务端渲染

CSR - Client side render 客户端端渲染（包含以下两种）

​ 1. BSR - Browser side render 浏览器渲染

​ 2. APP端渲染

SEO: SEO(Search Engine Optimization)是指搜索引擎优化，通俗说就是总结搜索引擎的检索排名规则，合理的优化网站，使得你的网站在百度或者谷歌这样的搜索引擎中的排名进步，让更多的用户能够访问到你的网站

BSR：

1. 首先www.baidu.com 这个网址进行DNS域名解析，得到相应的IP地址
2. 根据这个IP找到相应的服务器，发起TCP三次握手
3. 建立TCP链接之后，发起HTTP请求
4. 服务器相应HTTP请求，服务器把html代码发送给浏览器
5. 浏览器解析html代码，并请求html之中的资源（比如：css,img等） 这是先得到html，再请求其他的
6. 浏览器对页面进行渲染，呈现给用户
7. 服务器关闭TCP连接（http连接）

优点：FP最快/可以实现局部刷新，无需每次都请求完整页面，用户体验好

• FP：仅有一个 div 根节点。以VUE为例，div#app 注册一个空的div
• FCP：包含页面的基本框架，但没有数据内容。以VUE为例，每个template中的div框架，对应VUE生命周期的mounted
• FMP：包含页面所有元素及数据。以VUE为例，通过接口更新到页面的数据后完整的页面展示；对应VUE的生命周期中的updated

缺点： 不利于SEO/整体加载速度慢

优化：

• 优化首屏加载，减少白屏时间，提升加载性能
• 加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，
• 页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；
• 延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
• 减少请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等
• 浏览器渲染原理：优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；
• 优化用户等待体验：白屏使用加载进度条、loading图、骨架屏代替等

SSR:

1. 请求html页面，里面包含html等数据
2. 浏览器渲染页面
3. 一次请求后，所有的html等显示在页面之中，利于搜索引擎来爬取数据

优点： 利于SEO/首屏渲染性能高

缺点： 性能全都依赖于服务器/前端界面开发可操作性不高