服务端渲染SSR

npm install vue vue-server-renderer --save

渲染一个 Vue 实例

// 第 1 步：创建一个 Vue 实例
const Vue = require('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)
})

与服务器集成
------
npm install express --save

Vue+SSR的完整实现

完整的实现流程如下图所示分为【模板页】（HTML）、【客户端】（Client Bundle）、【服务器端】（Server Bundle）三个模块。三个模块功能如下：

模板页：提供给客户端和服务器端渲染的html框架，令客户端和服务器端在该框架中进行页面的渲染

客户端：仅在浏览器端执行，向模板页中**注入js、css等静态资源**

服务器端：仅在服务器端执行，将Vue实例渲染为html字符串，注入到模板页的对应位置中

Vue应用程序改造

SPA模式下，用户与Vue应用是一对一的关系，而在SSR模式下，由于Vue实例是在服务器端进行渲染，而服务器是所有用户共用的，用户与Vue应用的关系变为了多对一。这就导致多个用户共用同一个Vue实例，导致实例中的数据相互污染。

​ 针对这个问题，我们需要对Vue应用的入口进行改造，将Vue实例的创建改为“工厂模式”，在每次渲染的时候创建新的Vue实例，避免用户共用同一个Vue实例的情况。具体改造代码如下：