乐趣区

关于前端:什么是服务端渲染

jiezi

好不容易搞利索了一个叫做 ajax 的货色, 终于晓得了什么叫做申请, 什么叫做接口, get 和 post 有啥区别, 咋又来了一个服务端渲染和前后端拆散

接下来, 带你分清 服务端渲染 和 前后端拆散！

渲染

什么是渲染呢 ?

其实很简略, 就是把数据反馈在页面上，说白了, 就是利用 js 的语法, 把某些数据组装成 html 构造的样子, 放在页面上展现。

举个例子 :

  1. 筹备一段 html 构造
<h1>hello world</h1>
<div class="demo-box"></div>
  1. 筹备一段数据

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

  1. 进行渲染
const ele = document.querySelector('.demo-box')
ele.innerHTML = str
  1. 关上浏览器

好了, 渲染结束, 咱们把一段 js 内的数据展现在了页面上。

当然了, 这只是一段十分非常简单的渲染，咱们再来看一个略微简单一点的：

  1. 筹备一段 html 构造
<table border="1">
    <thead align="center">
      <tr>
        <td> 序号 </td>
        <td> 名称 </td>
        <td> 介绍 </td>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
  1. 筹备一段数据
const list = [{ id: 1, title: '好程序员', desc: 'IT 培训高端课程'},
    {id: 2, title: '千锋教育', desc: '前端培训界扛把子'},
    {id: 3, title: '高薪待业', desc: '学 IT, 来千锋, 拿高薪'}
]
  1. 开始渲染
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>
  `
}, '')
  1. 关上浏览器

咱们曾经把这个数组数据渲染在页面上了，渲染的形式多种多样, 不论你用什么形式, 只有是把数据在页面上展现进去, 这个行为就叫做渲染。

浏览器和服务器

接下来, 咱们就要聊一下浏览器和服务器的问题了。

咱们都晓得浏览器也就是咱们通常说的前端, 工作就是展现内容，服务器也就是咱们通常说的后端, 工作就是筹备数据, 解决数据。

还有一个叫做数据库的货色, 用来存储数据。这个时候, 咱们先临时疏忽一下过程, 看一下后果。

这是咱们从数据源头到后果的展现, 在这里咱们疏忽了过程，在这个过程外面, 咱们有一个不可避免的问题, 就是浏览器, 不能间接从数据库中拿数据。所以, 在这个模型中, 咱们还须要一个服务器的存储。

前端不能操作数据库, 然而服务端能够
所以前端想要什么数据, 就通知后端
后端去数据库中找到对应的数据
拿到数据当前进行整合和解决
处理完毕后返回给前端
这个时候前端就能够把数据渲染在页面上

看到这里, 咱们可能会回忆起一点什么，这不就是我之前学习的 ajax 吗？

关上页面, 通过 ajax 发送申请到服务器获取数据，而后将响应体内容渲染在页面上

能想到这里, 阐明你之前的内容把握的很好，接下来咱们就开始进入正题。

前后端拆散和服务端渲染

页面也是服务器给的。

家喻户晓, 咱们的页面, 也就是咱们关上的 html 文件也是存储在服务器下面。

只不过咱们在地址栏输出了地址当前, 会依据对应的规定找到对应的服务器，拿到这个 html 文件, 被浏览器解析显示了进去。

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

前后端拆散

其实就是前端干前端的事件, 后端干后端的事件，也就是咱们以前的状况。

当你在地址栏输出地址的时候
服务器返回一个文件给你
当这个文件运行的时候, 通过执行外部的 js 代码
发送一个 ajax 申请
拿到对应返回的数据
把数据渲染在页面上

服务端渲染

其实就是在服务端把所有的事件做完, 间接把后果给到前端，方才咱们说了, 页面等所有文件其实都是存储在服务器下面的。

当你在地址栏输出地址当前
服务器会找到你须要的 html 文件, 然而先不给你
而后去找到以后这个文件内所须要的数据内容
而后, 把数据内容组装成一个 html 构造插入到页面内
而后把插入好数据的页面间接返回给你

区别

  1. 数据渲染

前后端拆散 : 后端把数据返回给客户端, 在客户端运算渲染进去
服务端渲染 : 你失去的 html 源文件就是所有数据都书写好的文件

  1. 源文件

前后端拆散 : 你失去的 html 源文件是没有对应的渲染内容的, 须要依附执行 js 渲染

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

  1. 页面加载速度

前后端拆散 : 失去 html 页面当前, 还须要期待 ajax 申请数据在进行渲染

服务端渲染 : 失去的 html 就是残缺的最终页面, 间接

展现即可

  1. SEO

前后端拆散 : 因为页面没有构造, 所以不利于搜索引擎抓取

服务端渲染 : 失去的 html 就是残缺内容, 搜索引擎能够抓取到所有内容

举个例子：你家里刚刚装修好, 须要买一张床

前后端拆散 (你: 前端, 销售商: 后端, 厂家: 数据库)

你给销售商说好, 你要什么样子的床, 什么色彩等等内容
销售商就去厂家定制所有的资料
而后销售商就拿着原材料, 送到你家就好了
这个时候你须要本人去组装成一个床
这时你就会发现, 你想睡在这个床上, 那么还须要一点工夫

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

你给销售商说好, 你要什么样子的床, 什么色彩等等内容
销售商就去厂家定制所有的资料
而后呢, 销售商会在他那里把床组装好, 间接给你搬过去
到你家当前呢, 把房顶掀起来, 床放进去, 齐活
这时你是齐全能够间接躺在床上睡觉的

总结

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

● 后端的工作就是 解决数据

前后端拆散 : 前端负责数据渲染, 后端负责提供数据, 本人干本人的事件

服务端渲染：前端负责躺平，后端负责数据和渲染。

退出移动版