服务端渲染SSR与客户端渲染

一、服务端渲染和客户端渲染的区别

服务端渲染（SSR – server side render）

服务端渲染SSR是指：在服务端对页面进行渲染，把请求得到的数据插入页面html结构。

浏览器请求页面时，服务端响应的body中就返回了渲染好的页面html结构。浏览器仅需加载css即可。

客户端渲染

客户端渲染是指：在客户端对页面进行渲染，在客户端解析页面js，遇到ajax就异步请求数据，并插入页面html结构。

使用客户端渲染，当请求页面时，返回的body里为空，从上到下依次解析，在解析的过程中，如果发现ajax请求，则再次发起新的请求，拿到动态数据后，渲染成完整的html并注入到body里，结合css显示出来；

二、使用服务端渲染（SSR）的利弊

优势

• 利于SEO

  服务端渲染可以被爬虫抓取到，客户端异步渲染很难被爬虫抓取。

  原因：爬虫工作时不会执行网站的任何脚本。

  • 采用服务端渲染时，返回给客户端的是已经获取了异步数据并执行js脚本的最终html，网络爬虫就可以抓取到完整页面的信息。从而可以被搜索引擎抓取，但同时也可能被恶意爬虫抓取造成数据泄露。

  • 采用客户端渲染时，异步数据无法被抓取，尤其是使用了React、Vue等MVVM框架后，页面的DOM元素大多在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少。

• 更利于首屏渲染

  首屏的渲染是node发送的html字符串，客户端只需一次请求即可拿到整个页面。尤其针对大型单页应用，避免了首屏加载的长时间白屏等待。

局限

• 服务端压力较大

  本来通过客户端完成渲染，现在统一到服务端node服务实现，在高并发访问时，会大量占用服务端CPU资源；

• 学习成本较高

  除了对webpack和React/Vue熟悉，还需要掌握node、Koa2等相关技术。与客户端渲染相比，项目构建和部署的过程更加复杂。

三、实际应用

应用原则

真正的网站会采用两者结合的方式来实现。

• 需要seo时，采用服务端渲染
• 侧重效率和用户体验时，采用客户端渲染，ajax异步刷新获取数据

举例

• 单页面应用的首屏为了SEO，往往会采用服务端渲染。【也就是希望首页信息能够被浏览器搜索到，网站搜索排名更高】
• 购物网站的商品信息为了SEO，也会采用服务端渲染。【希望商品信息能够被浏览器搜索到，从而得到更高的销量】
• 评论信息等不需要考虑SEO的内容，一般会采用客户端渲染，通过ajax异步获取，从而获得更好的用户体验。

四、参考链接

1. 浅谈服务端渲染(SSR)

2. 黑马程序猿nodejs视频教程（李鹏周）