day_3服务端渲染的一些常识

当我们使用VUE开发的好好的，为什么需要服务端渲染那么复杂的操作来重构我们的页面，它能给我们带来什么好处呢。本人感觉有如下三点的优势，更多可以网上找关于SSR的资料。

增加首屏渲染速度。

• 普通的html请求页面的时候，返回的body是为空。之后执行JS将html结构注入到body中，在载入css样式。
• 服务端渲染请求html页面，返回的body里面已经有了首屏的html结构，之后在结合css样式显示页面。

普通渲染是没有产品的数据 服务端渲染首屏html

时间消耗更少

• 普通的html如果需要首屏的网络请求，则中间需要一段耗时的网络请求层。

• 服务端渲染则在返回dom结构的时候，已经把数据注入到页面中。节约了中间网络请求的时间。

  
  服务端渲染把数据已经注入到页面上

更利于seo的优化。如下图能直接看出vue的普通渲染和服务端渲染的区别。

• 普通的html需要每个页面单独的去设置TDK，比如有100个产品，则需要100个静态的TDK页面。
• 服务端渲染可以将TDK信息直接注入到页面中，数据也注入到dom节点中，方便搜索。

普通渲染TDK 服务端渲染TDK

总结

• 服务端渲染对服务器的压力会比较大，因为一些网络请求，拼接html节点等操作都是在服务端组合，前端的浏览器知识单纯的来渲染html节点。
• 本人会决定采用ssr来做pc的页面之一，是因为很多pc的页面都是需要seo的优化，方便爬虫可以爬到数据。比如该品牌的官网是需要TDK让百度更方便的爬到页面。
• 原因之二是因为有些产品的数据，也是需要让爬虫能爬到数据，如果是用普通的渲染，爬虫是无法爬到在通过接口请求的数据的。比如我们在请求普通的一个产品详情页面，需要先将html和js先请求到本地，然后通过axios或者是ajax在请求到产品的详情数据，最后在渲染到页面上。如此一来爬虫是无法爬到中间请求的数据。那么我们服务器在首屏返回页面的时候，就需要将数据填充到html页面中。

待续。。。 后期在去其他网站上扒几张流程图看起来会更清晰一点。