今天我要给你们介绍一个很酷的功能——在Vue 3中实现服务端渲染（SSR）
首先，我们来聊聊SSR是什么。它就像是一个魔术师，能让你的网页在服务器上就预先渲染好，然后发送到客户端。想象一下，你在浏览一个网页，一点开链接，页面就直接出现在你面前，就像变魔术一样，这就是SSR的作用！
要在Vue 3中使用SSR，我们需要先安装一个称为“vue-server-renderer”的库。怎么安装？哈哈，就像这样！
npm install vue-server-renderer
安装完之后，我们就可以开始使用SSR了！
首先，我们需要在服务器端创建一个Vue实例。
import Vue from 'vue'
import App from './App.vue'
const serverVm = new Vue({
render: h => h(App),
$server: true // 标记为服务器端渲染
})
然后，我们需要创建一个服务器来处理请求并发送响应。
import http from 'http'
import Vue from 'vue'
import App from './App.vue'
import serverVm from './server-vm' // 导入上面创建的服务器实例
const server = http.createServer((req, res) => {
serverVm.$mount('#app') // 将服务器实例挂载到根节点上
res.end('') // 结束响应，防止浏览器缓存此页，影响首屏渲染时间
})
我们还要设置一些规则来确保正常进行。这就是我们需要在服务器端的代码中添加的一些配置。
const rendererOptions = {
runInNewContext: false, // 确保在服务器端渲染时组件代码不会被执行两次
} as VueServerRendererRenderOptions
const renderer = Vue.createRenderer(rendererOptions) // 创建渲染器
serverVm.$mount('#app', renderer) // 将服务器实例挂载到根节点上并使用渲染器进行渲染
现在，我们已经准备好在服务器端渲染Vue应用了！你可以将上面的代码嵌入到你的服务器端代码中，比如使用Express.js或Koa.js等框架来创建一个HTTP服务器。
在客户端，你还需要加载服务器端渲染（SSR）生成的HTML。这里有一个简单的例子，展示了如何在Vue客户端加载SSR生成的HTML。
// 这是一个在Vue客户端加载SSR生成的HTML的简单例子：
import Vue from 'vue'
import App from './App.vue'
import serverVm from './server-vm' // 导入上面创建的服务器实例
const clientVm = new Vue({
render: h => h(App), // 使用客户端的App组件进行渲染
$server: true, // 标记为服务器端渲染已完成
$el: '#app', // 将根节点替换为客户端实例挂载的元素
beforeDestroy: () => {
// 在客户端实例销毁前执行清理工作
serverVm.$destroy() // 销毁服务器端实例以释放内存和资源
}
})
在Vue 3中，实现服务端渲染（SSR）时，还需要注意以下几点：
数据传递
当你在Vue 3中实现SSR时，你需要确保在服务器端和客户端之间正确传递数据。这可以通过在服务器端渲染时，将数据附加到HTML中，然后在客户端从HTML中提取数据。以下是一个简单的例子：
// 在服务器端渲染时，将数据附加到HTML中：
const html = renderer.renderToString(App, {
data: {
message: 'Hello, world!' } })
然后在客户端，你可以通过Vue的created()钩子来获取数据：
// 在客户端获取数据：
export default defineComponent({
created() {
const data = JSON.parse(this.$el.getAttribute('data'))
console.log(data.message) // 输出：Hello, world!
}
})
状态管理
在SSR中，你可能需要管理全局状态，以确保服务器端和客户端的状态保持一致。这可以通过使用Vue的全局事件或Vuex状态管理库来实现。以下是一个使用Vuex的简单例子：
首先，在服务器端安装Vuex：
npm install vuex
然后创建一个store.js文件：
// store.js
import {
createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
在服务器端和客户端的App组件中，都引入store并使用mutations修改状态：
// App.vue（服务器端）
<script>
import {
mapMutations } from 'vuex'
import store from './store' // 引入store.js
export default defineComponent({
setup() {
const {
count } = store.state // 获取状态
const increment = mapMutations('store', 'increment') // 映射mutations到组件中
return {
count, increment } // 将状态和方法返回给模板使用
}
})
</script>
以上就是在Vue 3中实现SSR时需要注意的几点。当然，这只是一个简单的示例，实际使用中可能还需要考虑更多细节，比如路由、安全性等等。