Vue.js的SSR是什么？如何实现？

Vue.js 的 SSR 是服务端渲染(Server Side Rendering)的缩写。它指的是将组件渲染为 HTML 字符串在服务端完成,然后将静态标记(HTML)发送到客户端,最后在客户端”激活”这些静态标记,使其呈现出与客户端渲染一致的交互体验。

SSR 的主要优势:

1. 更好的 SEO:由于搜索引擎爬虫抓取工具可以直接获取完整渲染的页面内容,有利于SEO。
2. 更快的内容到达时间:在html发送到浏览器后可以直接展现页面内容,无需等待js下载和执行。
3. 更轻量的 JavaScript 交互:可以减少一部分交互代码,cla​ss-、style动态绑定等在服务端已经完成。

实现 Vue SSR 主要步骤:

1. 接收请求并渲染:使用 Vue 服务端渲染实例将组件渲染为 HTML 字符串。

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. 客户端接管服务端注入数据及事件:
   需要在服务端渲染 context 中定义,并在客户端 beforeMount 钩子中获取。

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

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