玩转 Vue 服务端渲染——折腾记录

前端

2024-01-26 20:45:44

各位前端工程师，大家好！

最近我在研究 Vue.js 的服务端渲染，想借此机会跟大家分享一下我的折腾记录。

服务端渲染（SSR）

SSR 是一种渲染技术，它可以在服务端将 Vue 组件转换为 HTML，然后将 HTML 发送给客户端。

与传统的客户端渲染（CSR）相比，SSR 具有以下优点：

提高首屏加载速度：SSR 可以提前将 HTML 发送给客户端，而客户端只需要渲染即可。这可以减少客户端的渲染时间，从而提高首屏加载速度。
增强 SEO：搜索引擎可以抓取 SSR 生成的 HTML，这有助于提高网站的 SEO 排名。

Vuex

Vuex 是一个状态管理库，它可以帮助我们管理 Vue.js 应用中的状态。

使用 Vuex 可以带来以下好处：

集中式状态管理：Vuex 可以将应用中的状态集中管理起来，方便我们进行维护和更新。
提高应用性能：Vuex 可以避免重复渲染，从而提高应用性能。
方便调试：Vuex 提供了强大的调试工具，可以帮助我们快速找到问题。

实践

接下来，我将通过一个简单的例子来演示如何使用 Vuex 实现服务端渲染。

安装必要的依赖

npm install vue vue-router vuex vue-server-renderer

创建一个 Vue.js 应用

vue create my-app

在 Vue.js 应用中安装 Vuex

npm install vuex

在 Vue.js 应用中创建 Vuex store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

在 Vue.js 应用中创建组件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const App = {
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">+</button>
    </div>
  `,
  data () {
    return {
      store
    }
  },
  methods: {
    increment () {
      this.store.commit('increment')
    }
  }
}

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在 Vue.js 应用中创建服务端渲染入口文件

import Vue from 'vue'
import Vuex from 'vuex'
import VueServerRenderer from 'vue-server-renderer'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const renderer = new VueServerRenderer()

const app = new Vue({
  store,
  render: h => h(App)
})

renderer.renderToString(app, (err, html) => {
  if (err) {
    console.error(err)
    return
  }

  console.log(html)
})