vue.js - 仅 SSR / 禁用客户端渲染

Question

<template>
  <nav v-once>
    <catalog-menu-container v-once :items="this.awd.children_data" />
  </nav>
</template>

<script>

import axios from 'axios';
import catalogMenuContainer from '~/components/catalog/menu/container.vue'

export default {
  name: 'catalog-menu',
  components: {
    catalogMenuContainer
  },
  async serverPrefetch () {
      let { data } = await axios.get('url')
      this.awd = data;
  }
}
</script>

此代码中的组件在服务器端呈现。而且，它再次在客户端呈现。如何禁用客户端渲染？我只想要在服务器端生成的 html。“v-once”不起作用。

Answer 1

vue 文档非常清楚地处理这个警告：

警告您应该检查组件是否在挂载的钩子中被服务器端渲染，以避免执行两次逻辑。

因此，您需要添加到您的代码中：

mounted () {
    // If we didn't already do it on the server
    // we fetch the item
    if (!this.awd) {
      let { data } = await axios.get('url')
      this.awd = data;
    }
  },

或者，也许理想情况下，当您使用 nuxt 时，您可以使用asyncData而不是serverPrefetch

async asyncData (context) {
    let { data } = await axios.get(`url`)
    return { context.awd: data }
  }