Hoy les presentaré una característica interesante: renderizado del lado del servidor (SSR) en Vue 3.
Primero, hablemos de qué es SSR. Es como un mago, permitiendo que sus páginas web se preprocesen en el servidor y luego se envíen al cliente. Imagine que está navegando por una página web, haga clic en el enlace y la página aparecerá directamente frente a usted, como por arte de magia, ¡esta es la función de SSR!
Para usar SSR en Vue 3, primero debemos instalar una biblioteca llamada "vue-server-renderer". ¿Cómo instalar? ¡Jaja, así!
npm install vue-server-renderer
Una vez completada la instalación, ¡podemos comenzar a usar SSR!
Primero, necesitamos crear una instancia de Vue en el lado del servidor.
import Vue from 'vue'
import App from './App.vue'
const serverVm = new Vue({
render: h => h(App),
$server: true // 标记为服务器端渲染
})
Luego, necesitamos crear un servidor para manejar la solicitud y enviar la respuesta.
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('') // 结束响应，防止浏览器缓存此页，影响首屏渲染时间
})
También estableceremos algunas reglas para asegurarnos de que todo funcione. Esta es una configuración que debemos agregar en el código del lado del servidor.
const rendererOptions = {
runInNewContext: false, // 确保在服务器端渲染时组件代码不会被执行两次
} as VueServerRendererRenderOptions
const renderer = Vue.createRenderer(rendererOptions) // 创建渲染器
serverVm.$mount('#app', renderer) // 将服务器实例挂载到根节点上并使用渲染器进行渲染
¡Ahora estamos listos para renderizar nuestra aplicación Vue en el lado del servidor! Puede incrustar el código anterior en el código del lado del servidor, como usar un marco como Express.js o Koa.js para crear un servidor HTTP.
En el lado del cliente, también necesita cargar el HTML generado por Server Side Rendering (SSR). Aquí hay un ejemplo simple que muestra cómo cargar HTML generado por SSR en un cliente Vue.
// 这是一个在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() // 销毁服务器端实例以释放内存和资源
}
})
En Vue 3, al implementar la representación del lado del servidor (SSR), debe prestar atención a los siguientes puntos:
Paso de datos
Cuando implementa SSR en Vue 3, debe asegurarse de que los datos se pasen correctamente entre el servidor y el cliente. Esto se puede hacer agregando datos al HTML cuando se renderiza en el lado del servidor y luego extrayendo los datos del HTML en el lado del cliente. Aquí hay un ejemplo simple:
// 在服务器端渲染时，将数据附加到HTML中：
const html = renderer.renderToString(App, {
data: {
message: 'Hello, world!' } })
Luego, en el lado del cliente, puede obtener los datos a través del gancho creado() de Vue:
// 在客户端获取数据：
export default defineComponent({
created() {
const data = JSON.parse(this.$el.getAttribute('data'))
console.log(data.message) // 输出：Hello, world!
}
})
Administración de estado
En SSR, es posible que necesite administrar el estado global para garantizar que el estado del servidor y del cliente permanezca consistente. Esto se puede lograr utilizando los eventos globales de Vue o la biblioteca de administración de estado de Vuex. Aquí hay un ejemplo simple usando Vuex:
Primero, instale Vuex en el lado del servidor:
npm install vuex
Luego cree un archivo store.js:
// store.js
import {
createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
Tanto en los componentes de la aplicación del lado del servidor como del lado del cliente, se introduce la tienda y se utilizan mutaciones para modificar el estado:
// 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>
Los anteriores son los puntos a los que se debe prestar atención al implementar SSR en Vue 3. Por supuesto, este es solo un ejemplo simple y es posible que sea necesario considerar más detalles en el uso real, como enrutamiento, seguridad, etc.