浅谈前端浏览器渲染和服务端渲染

先给几个定义： 

         渲染：指的是生成html文档的过程，并非浏览器渲染html。

         模板引擎：模板解析(编译)和数据渲染。这两个步骤放在后端执行，则是像Smarty，FreeMarker这样的后端模板引擎；如果放在前端执行，就是我们所说的前端模板,如juicer。

           服务端渲染：后端模板引擎

           浏览器渲染：前端模板引擎或用JS 渲染

           在传统的web开发中，通常是前端将静态页面写好后给后端人员，后端人员会将其转成.VM、.JSP 文件，这些VM，JSP实际上就是后端的模板引擎。当客户端发送页面请求时，这些VM，JSP文件被服务端处理后返回的是带有数据的html，它的编译过程和数据的渲染都是在服务器完成的。而前端的模板引擎，如 juicer ，它是对请求后的数据进行渲染，也就是html的生成过程是在客户端完成的。

          题外话，根据上述的内容，终于明白为什么要前后端分离。假设有客户提出在界面上添加个东西，按照传统的做法，前端先做个模板，然后和后端对接，后端有问题找前端修改再对接。这种方式的前端做的是前端的工作，但不全，而后端做的不只是提供数据接口的工作，因为他们还要将html  转成VM，这明显不碍于项目的开发和维护。所以前后端分离的概念就是，前端做前端的事，包括界面的展示，数据请求，逻辑处理，路由等；而后端只是提供数据接口而已。

          把话题回归到主题上。前面也说过浏览器渲染有两种，前端模板引擎或用JS。对于MV*框架(数据和展示分离)的单页面应用（SPA），它们的页面都是通过JS 渲染而成，属于浏览器渲染。所以使用这种方式的弊端在于网站的搜索引擎优化，因为网络爬虫是不读区JS文件的。

          服务端渲染：用后台语言通过模版引擎生成html，如：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade.适合多页面应用。目前大部分网站还是这种形式。