2024年06月13日 建站教程
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
}
本文链接：http://so.lmcjl.com/news/6491/