Nuxt.jsのasyncDataって一体なんなのか

Nuxt.jsの公式サンプルを１つずつ読み解いていくとabout.vueでasyncDataを使っているけれど、これって一体なんなのか

asyncDataでできること

ページコンポーネントがロードされる前に呼び出され、ユーザーがページを遷移する前にも呼び出される

asyncDataを使わない

これだと{{message}}がページをロードした時にちらつく。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: process.browser ? 'true' : 'false'
      }
    }
  }
</script>

asyncData使う

これなら、ページがロードされる前にasyncDataによって{{message}}にprocess.browserの結果が設定されるのでちらつきがない。

<template>
略
</template>

<script>
  export default {
    asyncData () {
      return {
        message: process.browser ? 'true' : 'false'
      }
    }
  }
</script>

第１引数に context

asyncDataの第一引数にはasyncData内で使用できるstoreなどのオブジェクトがはいってきます。
Context

axiosでAPIを叩いてその結果を表示する例

asyncDataの引数に$axiosを設定して、APIを叩いた結果を表示する例。

vue.js

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData ({ $axios }) {
      const { data } = await $axios.get(`https://www.land.mlit.go.jp/webland/api/CitySearch?area=13`)
      return { message: data.status }
    }
  }
</script>

ここでのAPIのサンプルとして、国土交通省の土地総合情報システムを仕様しています