前后端渲染对比

后端渲染对比"/>

前后端渲染对比

什么是模板渲染

当获取到数据库里的数据之后，我们按照一定的规则将它载入到写好的模板中，输出成在浏览器中显示的HTML页面，这个过程就是渲染。

前后端渲染对比

早期的 Web 项目一般是在服务器端进行渲染，服务器进程从数据库获取数据后，利用后端模板引擎，甚至于直接在 HTML 模板中嵌入后端语言（例如 JSP），将数据加载进来生成 HTML，然后通过网络传输到用户的浏览器中，然后被浏览器解析成可见的页面。
而前端渲染 则是在浏览器里利用 JS 把数据和 HTML 模板进行组合。两种方式各有自己的优缺点，需要更 具自己的业务场景来选择技术方案。
前端渲染的优点在于：

• UI体验更好，在当下这越来越重要，用户除了看重功能之外，也越来越注重体验，通过使用vue.js、react等前端框架，可以搭建优秀的单页面web app，比传统的网页拥有更好的体验。
• 业务分离，后端只需要提供数据接口，前端在开发时也不需要部署对应的后端环境， 通过一些代理服务器工具就能远程获取后端数据进行开发，能够提升开发效率。
• 计算量转移，原本需要后端渲染的任务转移给了前端，减轻了服务器的压力。
• 通过使用前端框架，可以实现快速开发、迭代开发

而后端渲染的优点在于：

• 对搜索引擎友好。
• 首页加载时间短，后端渲染加载完成后就直接显示 HTML，但前端渲染在加载完成 后还需要有段 js 渲染的时间。

前端渲染也有它的缺点：

• 安全性 将整个UI逻辑交给客户端以后，一些有经验有能力的用户可能会劫持UI，使得他们能够看到一些不该看到的界面。后端不能轻信一切从前端传来的数据，切记一定要做好过滤与验证。
• 慢，渲染业务放在前端进行会比后端渲染好再传过来慢一些，尤其在初次加载的时候，但是随着计算机硬件和浏览器渲染技术的不断进步，这一问题会越来越不是问题

但是后端渲染的缺点无疑更多：

• 前后端开发交叉，不利于维护
• 做不到app化，体验较差
• 占用了大量的计算资源和带宽放在了与业务无关的渲染上

总的来说，前后端完全分离是未来的一个趋势，通过前端渲染可以大大的提高网站应用的运作效率，使用客户端的计算资源进行渲染，减轻了服务器的压力，使得在限定的资源下可以实现更高的效率。前端进行渲染的UI体验也会比后端渲染更好。