服务端和客户端渲染

前言

晚上加班有空,赶紧把上个星期欠的文章写了。
首先!这个话题是前面面试必备题哈哈。
到目前为止,前端生涯中做过了客户端渲染(SPA, AJAX),也做过了服务端渲染(用nodeJS做中间层渲染)。所以现在对客户端与服务端渲染的理解更加透彻了。

服务端渲染

怎么样判断是客户端还是服务端渲染最简单的方法就是右键查看源代码,里面出来的就是服务端渲染的东西。
这种方式,服务端要关心把数据取出来,经过业务逻辑处理,然后填好html(jsp,aspx等),搞个路由,发送给客户端,而客户端接收之后,要解析html,生成dom树,搞搞表单处理啊,交互啊什么的。

优点

  • 首屏渲染快,客户端只需要解析html
  • 有利于SEO
  • 可以缓存,生成静态化文件

缺点

  • 用户体验差,不能局部更新,就算提交个表单也要整屏刷新
  • 前后端不分离,开发成本高

客户端渲染

客户端渲染,客户端接收到的是一个空的HTML文件,ajax拿到各种数据,做业务逻辑处理,生成DOM插入HTML。

优点

  • 前后端分离啊,开发效率高
  • 局部刷新,体验好
  • 减轻服务端压力

缺点

  • SEO不行
  • 首屏渲染慢,要先下载一堆js,css,会造成白屏

总结

现在其实一般情况,不考虑seo的话都会选择客户端渲染。
那之前已经用了一些前端单页面框架的项目怎么办,总不能推倒重来吧。可以尝试用下Prerender.io。它的原理其实就是nginx识别当前的来源是爬虫还是浏览器,如果是爬虫的话,转发到另一个服务,这个服务吐出编织好的html返回出去,这样爬虫就能拿到html啦~
白屏体验的话可以加个菊花图,现在更加体验好的方案是Skeleton Screen,就是数据出来之前先把骨干先用个灰色的横条占位。