likes
comments
collection
share

浅谈服务端渲染和客户端渲染

作者站长头像
站长
· 阅读数 25

概念

服务端渲染（SSR）

废话不多说，我们先用node直接起一个express的服务，来看看结果，代码如下

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send(`
  <html>
    <head>
      <title>hello world</title>
    </head>
    <body>
      <div>hello world</div>
    </body>
  </html>
  `)
})

app.listen(3000, () => {
  console.log('sever is running')
})

打开网页源代码可以看到代码可以完整显示

浅谈服务端渲染和客户端渲染

这就是服务端渲染， 服务器将HTML文件数据渲染处理好了，再返回给客户端，浏览器不需要任何工作直接将页面渲染出来。

这样看来，服务端渲染其实就只有两个步骤：

  • 读取html文件
  • 模板渲染

我们来看看下面这张图

浅谈服务端渲染和客户端渲染

服务端渲染响应的是最终的结果，浏览器不需要再做任何的新的处理。从图片中可以看出，对于服务端渲染来讲，只需要发送一次请求就可以了。

但是将所有的事情都让服务端来操作的话， 服务端的压力就会比较大， 这样一来， 内容越多， 解析的速度就越慢了。而客户端渲染就可以为服务器分担一些压力了，那么我们来看看客户端渲染是怎么一回事。

客户端渲染（CSR）

同样的，我们也先来看个栗子吧，我简单的做了一个TodoList

浅谈服务端渲染和客户端渲染 然后我们打开网络源代码看看页面中的这些数据是否存在

浅谈服务端渲染和客户端渲染

通过图片我们可以看到， 代码中不存在任何页面上的数据。那么页面上的数据是哪里来的呢？

既然不是html直接显示， 那么可以很容易想到肯定是下面的script获取js代码得到数据的。

看了栗子后， 我再详细讲讲客户端渲染的一个过程吧！

  • 收到服务端响应字符串（页面）
  • 从上到下解析，当发现有ajax请求再次发起新的请求
  • 拿到ajax响应结果
  • 模板渲染

浅谈服务端渲染和客户端渲染

上面图片可以看出， 当浏览一个网页的时候， 服务器会先将页面返回， 然后再通过请求操作，继续响应页面数据。

从上面可以看出，客户端渲染从请求到完整中间内容的渲染发送请求至少有两次。

  • 第一次请求拿到的是页面（空白页面）
  • 第二次请求拿到的是动态数据

可以看出客户端渲染的请求次数比服务端渲染要多，但是它减轻了服务端渲染的压力，并且页面的显示会比服务端渲染更快一些（虽然只是一个空白页面， 哈哈）。

服务端渲染vs客户端渲染

总结上面再加上一些补充，来看看两者的一些区别吧

客户端

  • 页面渲染是由JS负责进行的
  • 前后端分离
  • 用户体验更好
  • 请求次数多，响应慢
  • 不利于SEO搜索引擎优化

服务器端

  • 直接返回HTML页面让浏览器直接进行渲染
  • 只需要进行一次请求
  • 可以被爬虫抓取
  • 占用服务端资源
  • 不利于前后端分离，开发效率低

服务端渲染&&客户端渲染

现在大多数网站为了更好的用户体验以及数据能够被爬虫获取，都是两者结合进行页面的渲染

例如：

淘宝商品列表采用的是服务器渲染， 利于SEO搜素引擎。

淘宝商品的客户评价是为了更好的客户体验，并且并不需要SEO优化，所以采用了客户端渲染

一个小tip

最后，提供给大家一个很好辨认页面中哪些是客户端渲染， 哪些是服务端渲染的方法： 打开页面的网络源代码， 能够搜到的就是服务端渲染，搜不到的就是客户端渲染

注：此文为本人学习过程中的笔记记录，如果有错误或者不准确的地方请大佬多多指教~

转载自:https://juejin.cn/post/6844904064346488846
评论
请登录