Vue实现SSR服务端渲染的几个步骤介绍

Vue.js的SSR是服务器端渲染(Server Side Rendering)的缩写。它是指在服务器端将组件渲染成HTML字符串，然后向客户端发送静态标签(HTML)，最后在客户端“激活”这些静态标签，呈现与客户端渲染一致的交互体验。下面给大家简单介绍一下具体实现步骤！

1、接收请求并渲染：

js
import Vue from 'vue'
import App from './App.vue'

// 创建一个实例
const app = new Vue({
  render: h => h(App)
})

// 渲染为 HTML 字符串
const html = await app.$renderToString()

2、将渲染结果发送给客户端：

js
res.send(html)

3、在客户端 mounted 钩子中”激活”静态内容：

js
mounted () {
  // 已有 DOM 结构,无需 vitrual-DOM 初次渲染
  this.$el.innerHTML = html  
} 

4、客户端接管服务端注入数据及事件：

js
// 服务端
context.$ssrContext = { someData: 'data' }  

// 客户端  
beforeMount() {
  const { someData } = this.$options.context.$ssrContext 
}