VUE-SSR原理和使用
开篇N问
SSR解决了什么问题？SSR存在那些问题？SSR优点缺点是什么如何使用以及原理
自我总结了有如下优势
- SSR利于seo优化，因为实现了在node中解析vue,将实例渲染成一个字符串直接返回给客户端，
- 而spa页面只有一个空标签，内容是通过js动态渲染的，所以传统SPA单页页不利于SEO，搜索引擎无法爬取页面中的内容
- 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来打包配置
