服务端渲染的基本原理

前后端分离和服务端渲染

众所周知, 我们的页面, 也就是我们打开的 html 文件也是存储在服务器上面，只不过我们在地址栏输入了地址以后, 会根据对应的规则找到对应的服务器，拿到这个 html 文件, 被浏览器解析显示了出来，不管 html 文件, 你所有的 图片, 视音频, css, html, js 文件其实都是存储在服务器上面的。

1.前后端分离

其实就是前端干前端的事情, 后端干后端的事情，也就是我们以前的情况，当你在地址栏输入地址的时候，服务器返回一个文件给你，当这个文件运行的时候, 通过执行内部的 js 代码，发送一个 ajax 请求，拿到对应返回的数据，把数据渲染在页面上。

2.服务端渲染

其实就是在服务端把所有的事情做完, 直接把结果给到前端，刚才我们说了, 页面等所有文件其实都是存储在服务器上面的。当你在地址栏输入地址以后，服务器会找到你需要的 html 文件, 但是先不给你，然后去找到当前这个文件内所需要的数据内容，然后, 把数据内容组装成一个 html 结构插入到页面内，然后把插入好数据的页面直接返回给你。

区别

1.数据渲染
前后端分离 : 后端把数据返回给客户端, 在客户端运算渲染出来
服务端渲染 : 后端把数据直接渲染在了 html 文件上, 把渲染好的文件给你

2.源文件
前后端分离 : 你得到的 html 源文件是没有对应的渲染内容的, 需要依靠执行 js 渲染
服务端渲染 : 你得到的 html 源文件就是所有数据都书写好的文件

3.页面加载速度
前后端分离 : 得到 html 页面以后, 还需要等待 ajax 请求数据再进行渲染
服务端渲染 : 得到的 html 就是完整的最终页面, 直接展示即可

4.SEO
前后端分离 : 因为页面没有结构, 所以不利于搜索引擎抓取
服务端渲染 : 得到的 html 就是完整内容, 搜索引擎可以抓取到所有内容