浅谈前端渲染与后端渲染的区别

一、前端渲染
访问网页时，先请求到 html 内容，并渲染出来。然后根据需要发送 ajax 请求获取后台返回的数据来更新页面。

浏览器中显示的网页中的大部分内容，都是由前端写的 js 代码在浏览器中执行，最终渲染出来的网页。
后端返回json数据后，前端预先写好html模板，循环读取json数据，字符串拼接，并插入页面中。（注：使用es6的模板字符串拼接能够减少拼接字符串的时间）

首先、简单的介绍一下什么是Ajax、以及为什么要使用他。
Ajax： Asynchronous JavaScript and XML，简言之就是异步 JavaScript 和 XML。

他可以通过和服务器的交互实现网页中部分信息的更新，这就使得我们在只需要进行少数数据更新的情况下，避免整个网页数据的再次加载，提升了开发性能。

举个例子就是说；现在你要注册一个网站，成为正式用户，然后有一大堆的信息录入表等你填写，这个时候你已经填了好多内容了，有个地方需要你输入验证码，然后呢，你表示看不清楚想要换一张验证码，这个时候，如果用普通的数据刷新请求方式去处理获取新的验证码的话，随之而来的问题就是，验证码虽然刷新了，但是你之前好不容易填写的一堆个人信息也被刷新了，没了，是不是很无语，所以，这种情况下，我们就需要使用Ajax这种部分内容刷新的请求方式去进行数据请求，从而达到更加高效快捷的更新网页内容的效果。

html 模版可以完全由前端来控制，同步或异步渲染完全由前端决定

什么是路由

 

路由是根据不同的 url 地址展示不同的内容或页面。

二、后端渲染
访问网页时，后端将 html 内容与 json 数据拼接好之后再返回到客户端来渲染。比如：jsp页面

三、 模板引擎

无论前后谁来渲染页面，都会用到模板引擎，前端渲染页面实际上是操作dom，后端渲染页面是把数据和html字符拼接后丢给浏览器

区别：
页面：前端受限于宽带和客户端的优化。后端页面呈现速度快，受限于用户的宽带。
流量：前端消耗多一点因为框架问题。后端消耗少一点可省去前端框架部分。
可维护性：前端可维护性高，前后端分离。后端可维护性较低，前后端放一起。
SEO对后端友好度较高，能够一次性渲染页面,利于搜索引擎抓取
前端就不利于SEO优化.谷歌浏览器可以对单页面应用进行ajax抓取, 但是国内的搜索环境还太差. 抓取不到需要的数据.

前后分离(html+js+css)
增加了静态资源服务器，具有缓存的作用，js+css+html会从上面下载下来，或者通过ajax来获取后端数据，而后端则通过API将数据传输出来，前端不用理后端提供的接口是ISO还是其他接口，然后js会将数据渲染到页面上，API接口在移动端也能用，即前端与APP都能用这个接口，jQuery也是采用这种模式。