Блог

 <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» не работает.

Документы 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 }
  }