在Vue 3中如何实现服务端渲染（SSR）-Toy模板网

这篇具有很好参考价值的文章主要介绍了在Vue 3中如何实现服务端渲染（SSR）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天我要给你们介绍一个很酷的功能——在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>