什么是服务端渲染和前后端分离

什么是服务端渲染

好不容易搞利索了一个叫做 ajax 的东西, 终于知道了什么叫做请求, 什么叫做接口, get 和 post 有啥区别, 咋又来了一个服务端渲染和前后端分离呢？接下来, 带你分清服务端渲染和前后端分离！

渲染

● 什么是渲染呢 ?

○ 其实很简单, 就是把数据反应在页面上

○ 说白了, 就是利用 js 的语法, 把某些数据组装成 html 结构的样子, 放在页面上展示

● 举个例子 :

1. 准备一段 html 结构

<h1>hello world</h1>
<div class="demo-box"></div>

2. 准备一段数据

const str = '你好啊, 我是来自千锋教育的小千'

3. 进行渲染

const ele = document.querySelector('.demo-box')
ele.innerHTML = str

4. 打开浏览器

● 好了, 渲染完毕, 我们把一段 js 内的数据展示在了页面上，当然了, 这只是一段非常非常简单的渲染，我们再来看一个稍微复杂一点的。

1. 准备一段 html 结构

<table border="1">
    <thead align="center">
      <tr>
        <td>序号</td>
        <td>名称</td>
        <td>介绍</td>
      </tr>
    </thead>
    <tbody>
      <!-- 等待渲染 -->
    </tbody>
  </table>

2. 准备一段数据

const list = [
    { id: 1, title: '好程序员', desc: 'IT培训高端课程' },
    { id: 2, title: '千锋教育', desc: '前端培训界扛把子' },
    { id: 3, title: '高薪就业', desc: '学 IT, 来千锋, 拿高薪' }
]

3. 开始渲染

const ele = document.querySelector('tbody')

ele.innerHTML = list.reduce((prev, item) => {
  return prev + `
    <tr>
      <td>${ item.id }</td>
      <td>${ item.title }</td>
      <td>${ item.desc }</td>
    </tr>
  `
}, '')

4. 打开浏览器

我们已经把这个数组数据渲染在页面上了，渲染的方式多种多样, 不管你用什么方式, 只要是把数据在页面上展示出来, 这个行为就叫做渲染。

浏览器和服务器

接下来, 咱们就要聊一下浏览器和服务器的问题了，我们都知道浏览器也就是我们通常说的前端, 任务就是展示内容，服务器也就是我们通常说的后端, 任务就是准备数据, 处理数据。还有一个叫做数据库的东西, 用来存储数据。这个时候, 我们先暂时忽略一下过程, 看一下结果。

● 这是我们从数据源头到结果的展示, 在这里我们忽略了过程，在这个过程里面, 我们有一个不可避免的问题, 就是浏览器, 不能直接从数据库中拿数据。所以, 在这个模型中, 我们还需要一个服务器的存储。

○ 前端不能操作数据库, 但是服务端可以

○ 所以前端想要什么数据, 就告诉后端

○ 后端去数据库中找到对应的数据

○ 拿到数据以后进行整合和处理

○ 处理完毕后返回给前端

○ 这个时候前端就可以把数据渲染在页面上

● 看到这里, 我们可能会回忆起一点什么

○ 这不就是我之前学习的 ajax 吗

○ 打开页面, 通过 ajax 发送请求到服务器获取数据

○ 然后将响应体内容渲染在页面上

● 能想到这里, 说明你之前的内容掌握的很好

● 接下来咱们就开始进入正题

前后端分离和服务端渲染

页面也是服务器给的

● 众所周知, 我们的页面, 也就是我们打开的 html 文件也是存储在服务器上面

● 只不过我们在地址栏输入了地址以后, 会根据对应的规则找到对应的服务器

● 拿到这个 html 文件, 被浏览器解析显示了出来

● 不管 html 文件, 你所有的图片, 视音频, css, html, js 文件其实都是存储在服务器上面的

前后端分离

● 其实就是前端干前端的事情, 后端干后端的事情

● 也就是我们以前的情况

○ 当你在地址栏输入地址的时候

○ 服务器返回一个文件给你

○ 当这个文件运行的时候, 通过执行内部的 js 代码

○ 发送一个 ajax 请求

○ 拿到对应返回的数据

○ 把数据渲染在页面上

服务端渲染

● 其实就是在服务端把所有的事情做完, 直接把结果给到前端

● 刚才我们说了, 页面等所有文件其实都是存储在服务器上面的

○ 当你在地址栏输入地址以后

○ 服务器会找到你需要的 html 文件, 但是先不给你

○ 然后去找到当前这个文件内所需要的数据内容

○ 然后, 把数据内容组装成一个 html 结构插入到页面内

○ 然后把插入好数据的页面直接返回给你

区别

1. 数据渲染

○ 前后端分离 : 后端把数据返回给客户端, 在客户端运算渲染出来

○ 服务端渲染 : 后端把数据直接渲染在了 html 文件上, 把渲染好的文件给你

2. 源文件

○ 前后端分离 : 你得到的 html 源文件是没有对应的渲染内容的, 需要依靠执行 js 渲染

○ 服务端渲染 : 你得到的 html 源文件就是所有数据都书写好的文件

3. 页面加载速度

○ 前后端分离 : 得到 html 页面以后, 还需要等待 ajax 请求数据在进行渲染

○ 服务端渲染 : 得到的 html 就是完整的最终页面, 直接展示即可

4. SEO

○ 前后端分离 : 因为页面没有结构, 所以不利于搜索引擎抓取

○ 服务端渲染 : 得到的 html 就是完整内容, 搜索引擎可以抓取到所有内容

例子

● 举个例子 :

○ 你家里刚刚装修好, 需要买一张床

○ 前后端分离 ( 你: 前端, 销售商: 后端, 厂家: 数据库 )

■ 你给销售商说好, 你要什么样子的床, 什么颜色等等内容

■ 销售商就去厂家定制所有的材料

■ 然后销售商就拿着原材料, 送到你家就好了

■ 这个时候你需要自己去组装成一个床

■ 这时你就会发现, 你想睡在这个床上, 那么还需要一点时间

○ 服务端渲染 ( 你: 前端, 销售商: 后端, 厂家: 数据库 )

■ 你给销售商说好, 你要什么样子的床, 什么颜色等等内容

■ 销售商就去厂家定制所有的材料

■ 然后呢, 销售商会在他那里把床组装好, 直接给你搬过来

■ 到你家以后呢, 把房顶掀起来, 床放进去, 齐活

■ 这时你是完全可以直接躺在床上睡觉的

总结

● 前端的工作就是展示数据

● 后端的工作就是处理数据

● 所以

○ 前后端分离 : 前端负责数据渲染, 后端负责提供数据, 自己干自己的事情

○ 服务端渲染 : 前端负责躺平, 后端负责数据和渲染

posted @ 2023-07-05 17:27 可爱的小锋阅读(111) 评论(0) 收藏举报

刷新页面返回顶部

qian-fen