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

后端渲染

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

前端渲染

随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，而可能添加了更多功能性的组件，复杂性更大，另外，彼时ajax的兴起，使得业界就开始推崇前后端分离的开发模式，即后端不提供完整的HTML页面，而是提供一些API使得前端可以获取到JSON数据，然后前端拿到JSON数据之后再在前端进行HTML页面的拼接，然后展示在浏览器上，这就是所谓的前端渲染。
这样前端就可以专注UI的开发，后端专注于逻辑的开发。代表是现在流行的SPA单页面应用，例如Vue、React框架，只需要后端给我们提供接口API，前端UI、交互等全在前端进行，前后端只需要约定接口。

前端渲染路线

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. 客户端把剩下一部分渲染完成(内容小，渲染快)

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

SPA

SPA：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

简单说： Web不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统...组成的应用程序，其中路由系统是非必须的。

大部分的Vue项目，本质是SPA应用，Angular.js、Angular、Vue、React...还有最早的"Pjax"均如此。

SPA时代，主要是在Web端使用了history或hash（主要是为了低版本浏览器的兼容）API，在首次请求经服务端路由输出整个应用程序后，接下来的路由都由前端掌控了，前端通过路由作为中心枢纽控制一系列页面（组件）的渲染加载和数据交互。

而上面所述的各类框架则是将以：路由、数据、视图为基本结构进行的规范化的封装。

最早的SPA应用，由Gmail、Google Docs、Twitter等大厂产品实践布道，广泛用于对SEO要求不高的场景中。

SSR

SSR： 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

在SPA之前的时代，我们的Web架构大都是SSR，如：Wordpress（PHP）、JSP技术、JavaWeb...或者DEDECMS、Discuz!等这些程序都是传统典型的SSR架构，
即：服务端取出数据和模板组合生成html输出给前端，前端发生请求时，重新向服务端请求html资源，路由也由服务端来控制。

其次，有个概念叫预渲染（Prerendering）。

如果你只是用服务端渲染来改善一个少数的营销页面（如 首页，关于，联系 等等）的SEO，那你可以用预渲染来实现。
预渲染不像服务器渲染那样即时编译HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过webpack插件将一些特定页面组件build时就编译为html文件，直接以静态资源的形式输出给搜索引擎。

但实际的商业应用中，大部分时候我们需要的是即时渲染，这也是我们今天讨论的主题。

后端渲染优缺点

优点：

前端耗时少，因为后端拼接完了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

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

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

前面我们谈到的SPA不利于SEO，因为就目前而言，部分搜索引擎如Google、bing等，它们的爬虫虽然已经支持执行JS甚至是通过AJAX获取数据了，但是对于异步数据的支持也还不足。


因为单页面的情况下的页面中的很多内容都是根据匹配到的路由动态生成并展示出来的，而且很多页面内容是通过ajax异步获取的，网络抓取工具并不会等待异步请求完成后再行抓取页面内容，对于网络抓取工来说去准确模拟相关的行为获取复合数据是很困难的，它们更擅长对静态资源的抓取和分析。