服务端渲染和客户端渲染的对比

这里结合art-template模板引擎说明。

首先了解下前端页面中如何使用art-template

一、script 标签导入包，当这个标签导入完毕后，在window全局中就有了template 函数。

二、建立一个script标签，内部是模板字符串

<script type="text/template" id="tmpl">

三、 var htmlStr = template('tmpl',{要渲染的数据对象})

四、将建立好的HTML字符串，追加到页面中便可

 

重点来啦！

一、服务器端渲染

     每当有客户端请求页面了，服务器先在后端调用art-template，把指定的页面预先在后端渲染后，而后经过res.end把这个渲染完毕的完整页面，

返回给客户端直接展现。

 优势：对SEO友好，由于咱们通过服务器端渲染的页面，在网络中传输的时候，传输的是一个真实的页面。所以，爬虫客户端，当爬到咱们的页面后，

会分系咱们给他提供的这个页面，此时，咱们页面中的关键数据就会被爬虫给收录了。

缺点： 服务器端渲染，对服务器压力比较打，可使用服务器端的页面缓存技术，减轻服务器的渲染压力；不适合先后端分离开发。

 

二、客户端渲染

     每当用户要请求某个页面了，

 第一步，用户须要先把这个页面请求到客户端，此时用户拿到的页面只是一个模板页面。

 第二步，浏览器在解析模板页面的时候，会发起art-template的二次资源请求，同时要发送Ajax请求，去服务器获取数据

 第三步，在客户端调用art-template 渲染HTML结构，并把渲染厚的htmlStr append 到页面指定的容器中;

缺点： 对SEO至关不友好

优势： 减轻了服务器端的渲染压力;同时，最大的好处就是：可以实现先后端分离开发;

 

各自应用的场景：

一、当不须要对SEO友好的时候，推荐使用客户端渲染;

二、当须要对 SEO友好的时候，推荐使用服务器端渲染