服务器端渲染的网站,服务器渲染 与 客户端渲染

服务器渲染 与 客户端渲染

何为渲染？

如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。

但这是基本不可能的事情，数据一般是变化的。

你不可能为每套数据写一个视图，所以我们需要分离数据和视图，然后使用一种技术将数据塞到视图中，这种技术就叫渲染。

这工作放在服务器上做就是服务器渲染，放在浏览器做就是浏览器渲染。

简单来说：渲染，就是指 数据 放入 html模板文档的过程。

服务器渲染

后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，

这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，

在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。

实现：后端拼字符串呗…… (理论上后端模板也是字符串)

好处：模板统一在后端。前端(相对)省事，不占用客户端运算资源(解析模板)，只要不大改结构，文字啥的小修改后端改了就好了。

坏处：占用(部分、少部分)服务器运算资源、，response 出的数据量会(稍)大点，模板改了前端的交互和样式什么的一样得跟着联动修改。

简答来说：因为网页的数据不可能是不变的，服务器渲染就是每次拼成不一样的html字符串返回到浏览器

客户端渲染

前端渲染就是指浏览器会从后端得到一些信息，这些信息或许是angularjs的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。

这些形式都不重要，重要的是，将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示。

简单来说：客户端渲染，就是每个人从服务器获取到的html文件是一样的，再在客户端去通过接口获取数据，拼装成页面展示，

好处：用户体验好，因为只请求数据，速度快，单页面应用视图切换流畅没有白屏

坏处：SEO 不好

浏览器渲染和服务器渲染区别：

浏览器端渲染，指的是用js去生成html，前端做路由。举例：React, Vue等等前端框架。适合单页面应用程序。

服务器端渲染，指的是用后台语言通过一些模版引擎生成html。举例：PHP文件、NodeJS配合Jade。适合多页面应用。其实现在大部分网站还是这种形式。

SPA单页应用

单页应用用的基本都是浏览器渲染。

优点很明确，后端只提供数据，前端做视图和交互逻辑，分工明确。

服务器只提供接口，路由以及渲染都丢给前端，

服务器计算压力变轻了。