VUE-SSR原理和使用

开篇N问

SSR解决了什么问题？SSR存在那些问题？SSR优点缺点是什么如何使用以及原理

自我总结了有如下优势

-  SSR利于seo优化，因为实现了在node中解析vue,将实例渲染成一个字符串直接返回给客户端，
- 而spa页面只有一个空标签，内容是通过js动态渲染的，所以传统SPA单页页不利于SEO，搜索引擎无法爬取页面中的内容
- SSR页面在服务端渲染完成之后返回给客户端，所以可以有更快的首屏到达时间

而缺陷也很明显

- SSR 会占用服务器内存（可以使用一些缓存来减少压力）

- 浏览器一些API无法使用，例如钩子函数只有beforeCreate created，因为服务器不知dom什么时候渲染完

- 我们做项目的某些钩子就不能使用了，原因为了和服务端渲染保持一致，例如将ajax请求放在created中而不放在mouted中

基本原理

通过一份vue项目代码打包出两份代码，服务端使用 node渲染打包后的结果返回给客户端， 是一个字符串，没有交互，所以需要另一份打包的结果插入页面中，页面就有了交互功能

基本实现思路

通过一份vue项目代码打包出2份代码  ---> 使用node渲染打包后的结果 （ 字符串）--> 然后把另一份代码（客户端js）插入到页面

- 通过vue-servre-renderer 生成实例和模板成字符串，然后渲染

server 基本代码如下

const Vue = require('vue');
const VueServerRenderer = require('vue-server-renderer')
const Koa = require('koa')
const Router = require('@koa/router');
const fs = require('fs')

let vm = new Vue({
  data () {
    return {
      name: 'zq'
    }
  },
  template: '<div style="color:red">{{name}}</div>'
})

// 把模板temp.html中的文件读取，然后将渲染的vue实例插入到模板
const  template = fs.readFileSync('./temp.html', 'utf8');
// console.log(template)

// 将字符串插入模板中
let renderer = VueServerRenderer.createRenderer({template})

let app = new Koa();
let router = new Router();

router.get('/', async (ctx) => {
  ctx.body = await renderer.renderToString(vm);
})

app.use(router.routes())// 注册路由
app.listen(3000)

然后路由和 vuex管理的数据都需要单独生成一个实例 来保证每个客户端都是请求到的新实例

以上只是基本原理

我们还是需要使用webpack来打包配置