服务端渲染
把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页面页面，体验不好
好好学习，天天向上。
