前端渲染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的开发，后端专一于逻辑的开发。表明是如今流行的SPA单页面应用，例如Vue、React框架，只须要后端给咱们提供接口API，前端UI、交互等全在前端进行，先后端只须要约定接口。

后端渲染和前端渲染最重要的区别在于数据填充上的区别，也就是到底是谁来完成HTML文件的完整拼接，若是是在后端完成的，直接填充到HTML后传给前端，而后返回给客户端，就是后端渲染；而若是是前端作了更多的工做完成了HTML的拼接，经过ajax或者fetch从后台拿数据再本身填充或进行其余数据操做，则就是前端渲染

  下面几个是在网上搜到的网友对先后端渲染比较形象的比喻：

简单来讲：
后端渲染html 叫吐或者喷，机器人能够看到完整的呈现源码
前端模板渲染html叫填，机器人看不到完整的呈现源码

好比画一张带房子的画：
后端渲染：后端都画好，前端直接拿来展现给你看
前端渲染：后端把画布，房子，房子位置等一系列数据发给前端，前端现场画一个给你看

前端渲染和后端渲染路线

前端渲染路线

1. 请求一个HTML
    2. 服务端返回一个HTML
    3. 浏览器下载html里面的JS/CSS文件 
    4. 等待JS文件下载完成 
    5. 等待JS加载并初始化完成 
    6. JS代码终于能够运行，由JS代码向后端请求数据(ajax/fetch) 
    7. 等待后端数据返回 
    8. 客户端从无到完整地，把数据渲染为响应页面
复制代码

后端渲染路线

1. 请求一个HTML
    2. 服务端请求数据(内网请求快)
    3. 服务器初始渲染(服务端性能，较快）
    4. 服务端返回已经有正确内容的HTML
    5. 客户端请求JS/CSS文件
    6. 等待JS文件下载完成
    7. 等待JS加载并初始化完成
    8. 客户端把剩下一部分渲染完成(内容小，渲染快)
复制代码

从后端渲染到前端渲染的变化

• 计算任务转移
    本来由服务器执行的渲染任务转移给了客户端，这在大量用户访问的时候大大减轻后端的压力。让后端专一作后端应该作的事情，性能将大大提升，由于服务器作的事情确实减少了，而如今随着客户端软硬件的发展，也能处理好大多数的渲染工做了。

• 放弃前端权限
    将整个UI逻辑交给客户端之后，一些有经验有能力的用户可能会劫持UI，使得他们可以看到一些不应看到的界面。这彷佛违反了安全的原则。可是“一切在前端谈安全都是耍流氓”，后端不能轻信一切从前端传来的数据，切记必定要作好过滤与验证。只要使用SSL、屏蔽XSS、后端不出漏洞，想伪造身份劫持App仍是难以作到的。

后端渲染与前端渲染的优缺点对比

后端渲染优缺点

• 优势：

  • 前端耗时少，由于后端拼接完了HTML，不须要先下载一堆JS和CSS 后才能看到页面，浏览器只须要直接渲染出来
  • 搜索引擎优化，由于在后端有完整的HTML页面，因此爬虫更容易爬取得到信息，更有利于SEO
  • 无需占用客户端资源。即解析模板的工做彻底交由后端来作，客户端只要解析标准的HTML页面便可，这样对于客户端的资源占用更少，尤为是移动端，也能够更省电
  • 后端生成静态化文件。即生成缓存片断，这样就能够减小数据库查询浪费的时间了，且对于数据变化不大的页面很是高效

• 缺点：

  • 不利于先后端分离，开发效率低。使用服务器端渲染，则没法进行分工合做，则对于前端复杂度高的项目，不利于项目高效开发
  • 服务器端渲染，则前端通常就是写一个静态HTML文件，而后后端再修改成模板，这样是很是低效的，而且还经常须要先后端共同完成修改的动做
  • 若是后端改了模板，前端还须要根据改动的模板再调节CSS，这样使得先后端联调的时间增长
  • 占用服务器端资源，即服务器端完成HTML模板的解析，若是请求较多，会对服务器形成必定的访问压力。而若是使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实彻底交给了一个服务器

前端渲染优缺点

• 优势：  

  • 先后端分离，前端专一于前端UI，后端专一于API开发，且前端有更多的选择性，而不须要遵循后端特定的模板
  • 体验更好，好比，咱们将网站作成单页Web应用（single page web application，SPA，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序）或者部份内容作成SPA，这样，尤为是移动端，可使体验更接近于原生APP
  • 局部刷新，无需每次都进行完整页面请求
  • 懒加载，如在页面初始时只加载可视区域内的数据，滚动后再加载其它数据，能够经过 react-lazyload 实现
  • 富交互，使用 JS 实现各类酷炫效果
  • 节约服务器成本，省电省钱，JS 支持 CDN 部署，且部署极其简单，只须要服务器支持静态文件便可

• 缺点：

  • 前端响应较慢，若是是客户端渲染，前端还要进行拼接字符串的过程，须要耗费额外的时间，不如服务器端渲染速度快
  • 不利于SEO，目前好比百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，因此SEO不好

使用场景

  不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。好比企业级网站，主要功能是展现而没有复杂的交互，而且须要良好的SEO，则这时咱们就须要使用后端渲染；而相似后台管理页面，交互性比较强，不须要SEO的考虑，那么就可使用前端渲染。

  另外，具体使用何种渲染方法并非绝对的，好比如今一些网站采用了首屏后端渲染，即对于用户最开始打开的那个页面采用的是后端渲染，这样就保证了渲染速度，而其余的页面采用前端渲染，这样就完成了先后端分离。  

• 后端渲染：相对模块化，很是适用于偏向展现性的页面，利于SEO。并且因为是在后端就已经渲染好，因此加载体验相对好，在网速差的时候表现明显。
• 前端渲染：比较灵活，适用于dom操做比较频繁或者交互比较复杂的业务场景。能够很好地维护一份model，而不用反复请求。理论上更符合先后端分离。

为何前端渲染不利于SEO

  若是进行了先后端分离，那么前端就是经过JS来修改DOM使得HTML拼接彻底，而后再显示，或者是使用SPA，这样，SEO几乎没有。那么这种状况下如何作SEO优化呢？

SEO(Search Engine Optimization)，中文通常译做：搜索引擎优化。SEO是一种经过了解搜索引擎的运做规则(如何抓取网站页面，如何索引以及如何根据特定的关键字展示搜索结果排序等)来调整网站，以提升该网站在搜索引擎中某些关键词的搜索结果排名

  前面咱们谈到的SPA不利于SEO，由于就目前而言，部分搜索引擎如Google、bing等，它们的爬虫虽然已经支持执行JS甚至是经过AJAX获取数据了，可是对于异步数据的支持也还不足。   
  
  由于单页面的状况下的页面中的不少内容都是根据匹配到的路由动态生成并展现出来的，并且不少页面内容是经过ajax异步获取的，网络抓取工具并不会等待异步请求完成后再行抓取页面内容，对于网络抓取工来讲去准确模拟相关的行为获取复合数据是很困难的，它们更擅长对静态资源的抓取和分析。

vue和react实现的路由不是新的页面，只是动态切换了页面内容，页面没有重载，也就没有网页爬虫爬去取数据的过程

• 后端渲染爬虫看到的页面长这样：

能够看到是一个完整的HTML文件

• 前端渲染爬虫看到的页面长这样：

能够看到除了title没有其余关键数据

参考资料：

1. 前端后分离深刻分析 ——浏览器渲染和服务器渲染区别
2. 实现基于 Nuxt.js 的 SSR 应用
3. 服务端渲染 vs 客户端渲染