ssr（服务端渲染）复习

「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」

定义:

从服务器返回的html页面,服务端生成html的过程。将组件或页面通过服务器生成html字符串，发送到浏览器，最后标记在客户端上完全交互的应用程序

通俗讲就是:页面上的内容在服务器上已经生成好了，服务器把这个内容给到浏览器，浏览器拿到这个内容直接在页面上显示

优点:

1. 有利于SEO优化
2. 前端性能耗时少,首屏渲染快
3. 使得客户端的资源占用少
4. 后端生成静态化文件，可以减少数据库查询的浪费时间，高效查询
5. 不需要占用客户端资源，客户端只需要解析HTML页面

缺点:

1. 服务端压力大,占用服务器资源
2. 不利于前后端分离，开发效率低

使用情况:

1. 搜索类网站
2. vue全家桶或者react全家桶，荐通过服务端渲染来实现路由

安装:

npm install vue vue-server-renderer --save

1. 推荐使用 Node.js 版本 6+
2. 'vue-server-renderer' 和 'vue' 必须匹配版本
3. 'vue-server-renderer' 依赖一些 Node.js 原生模块，因此只能在 Node.js 中使用。我们可能会提供一个更简单的构建，可以在将来在其他「JavaScript 运行时(runtime)」运行

渲染实例:

// 1. 创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 2. 创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 3. 将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

注意:

如果ui展示协议数据是由Server直接处理完成，也可以认为是服务端渲染。如果展示协议数据是由客户端处理完成，则可以认为是客户端渲染。二者可以同时在应用中出现，不是互相对立的关系。 这里的客户端不一定是浏览器，也可以是任意处理约定协议的应用。