NUXTのサブコンポーネント内で非同期データを扱うと描画がめちゃ遅くなる

描画がめちゃおそになったのでメモ。

NUXTの子コンポーネント内で非同期データを扱うには2通りの方法があるそうな。

mounted() フック内に API コールを作成し、ロード時に data プロパティをセットすること。マイナスな側面: サーバーサイドレンダリングでは機能しません

この方法を試してみたところ、データを取得してからDOMの描画が行われるためか、描画がめちゃ遅くなる。
generateでもデータ読み込むとこだけ遅れて描画される。

参考
https://www.kimullaa.com/entry/2019/12/01/132724

<template>
  <ul>
    <template v-for="item in result">
      <template v-if="item.sectionsKey === 1">
        <li>
          <div><nuxt-link :to="item.url">{{ item.pages }}</nuxt-link></div>
          </div>
        </li>
      </template>
    </template>
  </ul>
</template>

<script>
import axios from "axios"
export default {
  data(){
    return{
      result: ''
    }
  },
  created() {
    this.asyncData()
  },
  methods: {
    asyncData() {
      axios.get('https://script.google.com/macros/s/id/exec')
      .then((res) => {
        this.result = res.data
      })
    }
  }
}
</script>

#2つめの方法の方がいい

ページコンポーネントの asyncData() または fetch() メソッド内に API コールを作成し、データを props としてサブコンポーネントへ渡すこと。この方法ではサーバーサイドレンダリングでもうまく機能します。マイナスな側面: ページ内 asyncData() または fetch() が他のコンポーネントのデータをロードするため、可読性が落ちるかもしれません。

これもSSRだといちいち通信が走るので描画が遅くなるけど、generateすると関係ないので、generate前提であればこれでいいかも。

oya.vue

<template>
  <directive :jsonData="result">
</template>

<script>
import axios from "axios"

export default {
async asyncData({ $axios }) {
    //jsonデータを取得
    const url = 'https://script.google.com/macros/s/id/exec';
    const response = await $axios.$get(url);
    return { result: response }
  }
}
</script>

ko.vue

<template>
  <!-- 整形はいい感じに -->
  {{ jsonData }}
</template>
<script>
export default {
  props:['jsonData']
}
</script>