什么是前后端渲染?

  • 简单理解:应该是只将数据和模版组装成 html。这里的渲染和浏览器渲染页面不同
  • 后端渲染:
    • 后端的程序在接收到浏览器的请求后,去读取模板文件,将文件里面的特定区域、符号转换为 html代码片段 再通过 http 传给浏览器,在传输的过程中传输的是完整的渲染了(数据填充完毕)的页面
    • 如下所示:
1
2
//路由或者叫控制器里面一般会往模板注入数据
res.render('./web/index.ejs',{title:"前台首页",'data':data});
1
2
3
4
5
6
7
8
9
10
11
<table>
<tr><td>服务端渲染表格:</td><td></td><td></td><td></td></tr>
<% for(var i=0;i<data.length;i++){ %>
<tr>
<td><%= data[i].id %></td>
<td><%= data[i].title %></td>
<td><%= data[i].description %></td>
<td><%= data[i].href %></td>
</tr>
<% }%>
</table>

前端渲染特点:

前端渲染的方式起源于JavaScript的兴起,ajax的大热更是让前端渲染更加成熟,前端渲染真正意义上的实现了前后端分离,前端只专注于UI的开发,后端只专注于逻辑的开发,前后端交互只通过约定好的API来交互,后端提供json数据,前端循环json生成DOM插入到页面中去

  • 后端的 html 模板页面作为静态文件存在,前端请求时后端不对该文件做任何内容上的修改,直接以资源的方式返回给浏览器,浏览器拿到页面后,根据写在 html 页面上的js代码,对该html的内容进行修改(数据填充由前端来完成)
  • 页面呈现速度:优化的好,可以逐步动态展开内容,感觉上会更快一点
  • 局部刷新。无需每次都进行完整页面请求
  • 服务器端只提供接口数据服务,业务逻辑全部在前端,前后分离
  • 前端模板解析对手机端的负担,对手机电池产生更快的消耗
  • 可维护性:好,后端纯,前端也纯
  • seo友好度:差,虽然google可以爪ajax了
  • 网络传输数据量小(减少了服务器压力)
  • 编码效率:高(主要不用反复和后端掐架了,可以专心写代码了)
  • 下面是一个例子:用 angular 渲染页面
1
2
3
4
5
6
7
8
9
10
11
//前端发请求获取数据
$scope.getSomeData = function () {
$http({method:'POST',
url:'/front',
data:{a:$scope.testa,b:$scope.testb}
}).then((data)=>{
//console.log(data);
$scope.frontData = data.data;
//console.log($scope.frontData);
},()=>{});
};
1
2
3
4
5
6
7
8
9
10
11
12
//后端只是提供像这样的即可即可
route.post('/front',function(req,res){
//console.log(req.body);//这样子能够拿到前台发来的post数据
db.query(`SELECT * FROM banner_table LIMIT 0,3`,function(err,data){
if (err) {
console.log(err);
res.status(500).send('database error').end();
} else {
res.send({'data':data}).end();
}
});
});
1
2
3
4
5
6
7
8
9
//模板文件由前端angular语法来渲染
<table>
<tr ng-repeat="v in frontData.data">
<td>{{v.id}}</td>
<td>{{v.title}}</td>
<td>{{v.description}}</td>
<td>{{v.href}}</td>
</tr>
</table>

后端渲染的特点

  • 首屏呈现速度:快,受限于用户的带宽(因为http上传输的就是完整的页面)
  • 流量消耗:少一点(可以省去加载前端框架的流量)
  • 前端耗时少(前端只负责将html进行展示),利于SEO
  • 可维护性:差(前后端东西放一起如:.jsp .php)出问题了,前端后端都不想改,岗位职责不清
  • 网络传输数据量大,占用(部分、少部分)服务器运算资源,response 出的数据量会(稍)大点,模板改了前端的交互和样式什么的一样得跟着联动修改
  • 开发效率:较低
  • seo友好度:好(因为http上传输的就是完整的页面,利于浏览器的抓取)
  • 对于电量不给力的手机或平板,减少在客户端的电量消耗很重要

小结

前后端的渲染各有优势,脱开场景谈方案、架构都是耍流氓,需要秒开首屏以及对seo有高要求的应用场景可以使用后端渲染,以及导出为.doc .docx ,导出.xls .xlsx ,导出为pdf …… 前后端的渲染结合使用。

  • 后端渲染html 叫吐或者喷,爬虫可以看到完整的呈现源码
  • 前端模板渲染html叫填,爬虫看不到完整的呈现源码