vue-ssr

服务端渲染

把vue实例渲染成html字符串返回，在前端激活为交互程序

优点

• 利于seo
• 首屏内容到达时间

服务端知识

npm i express -S

基础Http服务

1.创建 express实例 server
2.监听端口
3.编写路由器 处理不同URL请求

基础实现

使用渲染器将vue渲染成字符串返回

npm i vue-server-renderer

步骤

1.创建vue实例
2.获取渲染器实例
3.用渲染器渲染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>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

缺点

ssr相关考虑

优点：

• 利于seo
• 利于首屏优化

缺点：

• 实现比较麻烦
  每个app 都是一个vue实例，那么多个页面就要创建多个，比较贵
  从利于seo的方面来说，spa可以做些备选方案，比如分离首页。
  ssr是spa与传统页面开发的折中方式，一定程度上解决了首页加载慢与seo的问题。
• 环境问题
  一套代码两个环境执行，会出现一些不可避免的问题，因为在node中是没有window对象的，所以生命周期函数执行时需要先进行环境的判断，不然就会报错。
• 服务端数据获取
  官方方案使用Vuex在服务端预获取数据。 在服务端添加vue钩子函数，获取数据后，将数据保存在vuex的store结构中，同时渲染页面，但是这时候的this指向的是服务端的this，会不会有些异常错误
• 路由
  正常在客户端使用路由可以用hash/history模式，但在ssr中，路由需使用history模式，原因是hash提交不到服务器上
• 异常处理
  官方的处理是抛出500页面页面，体验不好

好好学习，天天向上。