仅 SSR / 禁用客户端渲染

【问题标题】：Only SSR / disable client side rendering仅 SSR / 禁用客户端渲染
【发布时间】：2019-04-19 00:19:53
【问题描述】：

<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”不起作用。

【问题讨论】：

github.com/maoberlehner/vue-lazy-hydration

标签： vue.js nuxt.js

【解决方案1】：

vue 文档非常清楚地用 warning: 处理这个问题

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

所以你想添加到你的代码中：

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 }
  }

【讨论】：