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来打包配置

巴特西

VUE-SSR原理和使用

最新文章

热门文章