NetWorkVvv

后端渲染（SSR、服务端渲染）

后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户

看图：在浏览器中输入URL地址然后向服务器发送请求，服务器端通过URL映射一些技术处理，最终只传递给浏览器数据只有HTML+CSS。而给的HTML+CSS是已经在后端渲染好的网页，浏览器只需要去解析HTML+CSS就能把网页展示出来，称为服务端渲染或者后端渲染。打开一个网页就要在服务器端渲染一次，不容置疑增加服务器的压力

前端渲染（SPA、单页面应用）

前端渲染就是指浏览器会从后端得到一些信息，这些信息或许是Angular.js的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。这些形式都不重要，重要的是，将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示

我认为模板这个词语并不能用来区分这些技术的本质，模板只是一种提供给程序来解析的一种语法，换句话说，模板是用于从数据（变量）到实际的视觉表现（HTML代码）这项工作的一种实现手段，而这种手段不论在前端还是后端都有应用

以下为本人自己的想法：浏览器URL请求向静态服务器请求全部的HTML+CSS+JS（webpack打包到了一起）代码，然后浏览器解析JS代码时，JS会通过（例如：Ajax）向服务器发送数据请求，服务器端发送数据给浏览器，然后通过JS渲染数据。

扩展：前端路由有一个映射表，通过映射表生成URL把从静态资源服务器请求过来的一套HTML+CSS+JS代码抽离出来，然后完成对应的渲染

SSR SPA 是什么？

SPA

SPA，即Single Page Application，按照字面意思就是单页富面应用，通俗点就是整个网站由一个html页面构成。三大框架Angular Vue React都是SPA

SPA的优点

$\bullet$ 页面响应速度快

$\bullet$ 减轻服务器压力

SPA的缺点

$\bullet$ 不利于SEO（Search Engine Optimization）搜索引擎优化

$\bullet$ 首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。

SSR

SSR（Server-Side Rendering）服务端渲染

简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序

SSR常用框架

$\bullet$ React 的 Next

$\bullet$ Vue.js 的 Nuxt

详细了解Next、Nuxt看文章//www.greatytc.com/p/a8be5c57966a

既然说到SSR就，说一下它的优缺点

优点：

1. 更快的响应速度

2. 容易被爬虫爬到页面数据

缺点：

1. 增加服务器压力

2. 开发难度增大

3. 可能会由于某些因素导致服务器端渲染的结果

前端渲染和后端渲染区别