为什么会有后端渲染(服务器渲染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叫填，机器人看不到完整的呈现源码

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

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

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

优点：

缺点：

优点：  

缺点：

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

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

  如果进行了前后端分离，那么前端就是通过JS来修改DOM使得HTML拼接完全，然后再显示，或者是使用SPA，这样，SEO几乎没有。那么这种情况下如何做SEO优化呢？

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

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

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

参考资料：