前端渲染HTML与后端渲染HTML的区别

两种渲染方式

为什么会有后端渲染(服务器渲染SSR)与前端渲染(客户端渲染CSR)

首先理解服务器和浏览器客户端之间传递的是什么: HTML、CSS、JavaScript的文件以及数据载体json(xml)等文件。

一开始，Web App 直接由若干 HTML、CSS、 JS 组成，每一个页面需要特殊的逻辑，因此随着App规模的扩大，后端网站目录下的代码文件就越来越多，而且，彼此之间是没有同步的。比如你改了站点的布局风格，那么你很可能需要改动成百上千的HTML文件，这劳动量太大了。既然如此多的HTML具有一定的逻辑联系，何不使用代码生成代码？于是后端模板语言诞生了，于是人们开始广泛使用模板语言代替手写HTML。

目前接触到的模板语言有pug(jade)跟go template

• pug模板示例如下：
  
• go template模板示例如下：
  
  通过后端渲染HTML，前端不需要配置路由那些步骤，只需要在需要填充内容的地方占位即可。需要对字段比较熟悉，还需要前后端一起联调。

后端渲染

互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，服务器进程从数据库获取数据后，后端的程序在把HTML页面吐给前端之前，先把HTML页面上的特定区域、特定符号，先用数据填充，将数据加载进来生成HTML，然后通过网络传输到用户的浏览器中解析成可见的页面。

所谓渲染，你可以理解一种修改，渲染这词最早来源于游戏领域，游戏领域又来源于现实画画，渲染嘛，拿着颜料往纸上涂便是。以前绝大部分服务器都是这个模式

前端渲染

随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，而可能添加了更多功能性的组件，复杂性更大，另外，彼时ajax的兴起，使得业界就开始推崇前后端分离的开发模式，即后端不提供完整的HTML页面，而是提供一些API使得前端可以获取到JSON数据，然后前端拿到JSON数据之后再在前端进行HTML页面的拼接，然后展示在浏览器上，这就是所谓的前端渲染。

这样前端就可以专注UI的开发，后端专注于逻辑的开发