服务端渲染与客户端渲染详解（vue）_vue服务端渲染和客户端渲染

1、客户端请求

（1）用户在浏览器输入请求的地址例如：172.0.0.1:8080 到服务器

服务器接受到客户端的请求拿到一个没有被数据渲染的空页面

（2）客户端拿到服务端的空字符串页面，然后从上往下开始执行里面的代码，当执行到script中有请求或者渲染等代码时，就会对服务器再次发出请求
（3）服务端接收到客户端的第二次请求，就把响应的数据发送给客户端，然后客户端再进行渲染

在客户端渲染中， 客户端至少要对服务端发送两次请求。

优点:
(1) 前后端分离，开发效率高。
(2) 用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。
缺点:
(3) 前端响应速度慢，特别是首屏。
(4) 不利于SEO

2、服务端渲染
（1）客户端只发送一次请求，服务端直接返回给客户端一个被渲染好的页面

服务器里面有页面＋数据
读取到index.html,在客户端请求之前将页面渲染完成，直接将渲染结果返回个客户端

优点:

(1) 不占用前端的资源,前端耗时少,尤其是移动端，也可以更省电。
(2) 有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息
（客户端通过AJAX获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持js和通过ajax获取数据。那就更不用提SEO）
(3) 使用服务器页面缓存，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效 。
缺点:
(4) 不利于前后端分离，开发效率低。
(5) 占用服务

1、客户端渲染需要对服务端进行两次请求，响应的开销较大，而服务端渲染只需要客户端对服务端进行一次请求
2、如何查看一个网页是客户端渲染还是服务端渲染：可以通过右键查看源代码的形式
客户端渲染: 右击查看源代码找不到内容
服务端渲染：是可以在源代码中找到内容的
4、网站一般都是用客户端渲染和服务端渲染结合的形式（结合不是指一个页面用两种渲染方式结合，而是指同构渲染）
5、商品的商品列表采用的是服务端渲染，目的是为了SEO搜索引擎优化，而他的商品评论为了用户体验，用户体验更好，就采用客户端渲染的方式
6、服务端渲染可以被爬虫抓取到，客户端渲染爬虫抓取不到
7.服务端渲染 搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,如果你的应用程序需要初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。

SSR 服务端渲染 网页内容由服务端生成 首屏时间短 有利于seo
CSR 客户端渲染 vue、react框架提供的spa都是客户端渲染 首屏渲染时间长不利于seo（vue提供构建单页面应用的方法，但你也可以用基础的vue框架去做服务端渲染）
如：

//导入vue包和express包进行服务端渲染
//app.js文件  是在后台的文件
const Vue = require('vue')  //导入vue
const server = require('express')()   //导入express

const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是：{{ url }}</div>`,
  })
  renderer.renderToString(app, (err, html) => {
    if (err) throw err
    res.send(html)
  })
})

server.listen(8888,() => console.log(`Example app listening on port 8888!`))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

同构的本质：（基于React、Vue等框架，客户端渲染和服务器端渲染的结合）
同一套vue代码在服务端执行一次，在客户端再执行一次
服务端渲染解决了首屏显示快 客户端渲染是需要把事件、响应式特性等vue经典的特性都绑回去，这样我们既可以使用vue的开发模式 又可以享受两种渲染方式的优势（引入同构的概念是为了让我们可以继续使用vue的特性）

Nuxt.js框架：
nuxt.js是一套使用vue框架开发应用的服务端渲染框架，提供了开箱即用的功能，可以为我们快速构建同时使用服务端渲染和客户端渲染的开发环境

同构渲染的流程：
1.客户端请求一个地址走到服务端；
2.服务端通过接口服务查询页面所需数据，并返回到服务端；
3.服务端渲染页面以及生成客户端SPA脚本；
4.返回渲染好的页面内容和客户端的SPA脚本给客户端，也就是html；
5.客户端呈现服务端返回的html；
6.客户端通过页面中的脚本激活为SPA应用；
7.客户端渲染页面的交互逻辑

前端渲染和后端渲染路线：
前端渲染路线：
请求一个HTML
服务端返回一个HTML
浏览器下载html里面的JS/CSS文件
等待JS文件下载完成
等待JS加载并初始化完成
JS代码终于可以运行，由JS代码向后端请求数据(ajax/fetch)
等待后端数据返回
客户端从无到完整地，把数据渲染为响应页面

后端渲染路线：（web2.0动态页面）
请求一个HTML
服务端请求数据(内网请求快) --操作数据库而已
服务器初始渲染(服务端性能，较快）
服务端返回已经有正确内容的HTML
客户端请求JS/CSS文件
等待JS文件下载完成
等待JS加载并初始化完成
客户端把剩下一部分渲染完成(内容小，渲染快，就是把获取到的数据添加到页面上)

服务端渲染实现原理机制：在服务端拿数据进行解析渲染，直接生成html片段返回给前端。然后前端可以通过解析后端返回的html片段到前端页面，大致有以下两种形式：
1、服务器通过模版引擎直接渲染整个页面，例如java后端的vm模版引擎，php后端的smarty模版引擎。（web1.0的静态页面）
2、服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加。（web2.0的动态页面 ）

服务端渲染：（web1.0时代没有AJAX，浏览器不需要任何的JavaScript参与–静态页面）

服务端渲染：（web2.0时代–动态页面，服务端渲染生成html代码块, 前端通过AJAX获取数据然后使用js动态添加数据即可，不用前端渲染元素，因为html代码块已经生成了，可以参考jq模板渲染）（也相当于结合了点客户端渲染，数据显示需要客户端渲染，源代码中也是查不到这些动态数据的）
说白了前端人员还是要去写css,html,js,只不过数据变量要多套层模板，即数据变量要先套在后端给的模板语法中，再去写html

客户端渲染：（web3.0）