面试题：Vue在SSR中虚拟DOM的数据预取问题

利用Vue虚拟DOM机制进行数据预取的方法

在组件中定义异步数据获取方法：在Vue组件内，可以使用asyncData（在Nuxt.js等SSR框架中有类似的约定）或者生命周期钩子函数（如created）来发起异步数据请求。例如：

export default {
  data() {
    return {
      someData: null
    }
  },
  async created() {
    const response = await fetch('/api/some-data')
    const result = await response.json()
    this.someData = result
  }
}

利用Vuex管理状态：将预取的数据存储在Vuex中，这样在服务端渲染时可以将Vuex的状态序列化并注入到HTML中，客户端在激活时可以直接使用这些预取的数据。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    someData: null
  },
  mutations: {
    setSomeData(state, data) {
      state.someData = data
    }
  },
  actions: {
    async fetchSomeData({ commit }) {
      const response = await fetch('/api/some-data')
      const result = await response.json()
      commit('setSomeData', result)
    }
  }
})

export default store

服务端预取数据：在服务端渲染的入口文件（如server.js）中，获取组件实例，调用异步数据获取方法，等待数据获取完成后再进行渲染。

import Vue from 'vue'
import serverRenderer from 'vue-server-renderer'
import App from './App.vue'
import store from './store'

const renderer = serverRenderer.createRenderer()

const context = {
  // 服务端渲染上下文
}

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

// 服务端预取数据
app.$store.dispatch('fetchSomeData').then(() => {
  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      console.error(err)
      return
    }
    // 返回渲染后的HTML
    console.log(html)
  })
})

客户端激活：客户端在激活时，直接使用服务端预取并注入到HTML中的数据，避免重复请求。

import Vue from 'vue'
import App from './App.vue'
import store from './store'

// 从window.__INITIAL_STATE__获取服务端预取的数据并填充到Vuex中
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

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

可能遇到的问题及解决方案

数据请求并发控制：
- 问题：在SSR场景下，如果多个组件同时发起数据请求，可能会导致过多的并发请求，影响性能甚至出现网络问题。
- 解决方案：可以使用队列控制并发请求数量，例如使用async - await结合Promise.all，限制同时进行的请求数量。也可以在服务端使用HTTP/2的多路复用特性，优化并发请求的性能。
服务端渲染与客户端激活数据不一致：
- 问题：由于服务端和客户端环境的差异，可能会导致服务端预取的数据与客户端激活后重新获取的数据不一致，出现闪烁或者页面状态异常。
- 解决方案：确保服务端和客户端的数据获取逻辑一致，并且在客户端激活时，先使用服务端预取的数据，然后再根据需要进行增量更新。可以通过在服务端将预取的数据序列化并注入到HTML中，客户端在激活时直接使用这些数据。
缓存问题：
- 问题：频繁的数据预取可能导致不必要的重复请求，增加服务器负载。
- 解决方案：在服务端和客户端实现缓存机制。服务端可以使用内存缓存（如node - cache），对于相同的请求直接返回缓存的数据。客户端可以使用浏览器的本地存储或者IndexedDB进行缓存，在一定时间内避免重复请求。
错误处理：
- 问题：在数据预取过程中，如果发生错误（如网络错误、API响应错误等），可能导致页面渲染失败或者渲染出错误的内容。
- 解决方案：在数据请求的代码中添加完善的错误处理逻辑。在服务端，可以捕获错误并返回合适的HTTP状态码和错误信息。在客户端，可以显示友好的错误提示，引导用户进行重试等操作。例如：

async created() {
  try {
    const response = await fetch('/api/some - data')
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    const result = await response.json()
    this.someData = result
  } catch (error) {
    this.errorMessage = 'Failed to fetch data. Please try again later.'
  }
}

星途面试题库

面试题：Vue在SSR中虚拟DOM的数据预取问题

知识考点

面试题答案

利用Vue虚拟DOM机制进行数据预取的方法

可能遇到的问题及解决方案