Nuxt.js と asyncData

みなさま、こんにちは。こんばんわ

今回は、Vercel上でNuxt.jsを用いて動的部分を実装するにあたりはまった内容をご紹介できればと思います。 Nuxt.jsに関しては下記の記事を参考にしていただければ幸いです。

nuxtjs.org

　1. 何が起きたのか

動的な部分において外部API通信を行いその結果をレンダリングする、といった方法が必要な場面が多々あります。 弊社の場合ではコース情報や申込締切日などがあります。 APIから情報を取得し設定するということで下記のようなことを行なっていました。

pages/index.js

<template>
  <div>
    <h1>サンプル 👋</h1>
    <p>
    </p>
  </div>
</template>

<script>
export default {
    head() {
        return {
            title: 'サンプルサイト',
            meta: [
                { hid: 'og:image', content: this.og.datetime },     // (2)
            ]
            ....
        }
    },
    data() {
      return {
        og: { }
      }
    },
    async asyncData({ $ axios }) {
        const og = await $axios.$get(OG_ENDPOINT)        // (1)
        return {
            og
        }
    }

}
</script>

上記のコードは、(1) API通信を行い必要なデータを取得した結果を(2)metaタグに設定しています。（今回は例のため時刻を設定しています） Nuxt.jsのライフサイクルを参考に上記のコードで実装していました。

nuxtjs.org

開発環境でも問題なく現在時刻がmetaタグとして設定されていることを確認し進めていました。 しかし、実際に動作させてみると本来であれば "9月26日" が表示されるはずが、下図のように過去の日付が設定されていました。

metaタグに設定された時刻

　2. 原因

結果から申し上げると、Nuxtの設定ファイルで target: static にしていることでした。 target: static の場合、Vercelにデプロイしたタイミング（generate）にasyncDataが実行されるようです。 これは、asyncDataで実行された結果を保存することでより爆速的なHTML表示がされるためにこのような形になったようです。下記のドキュメントで紹介されておりました。

nuxtjs.org

stackoverflow.com

今回の例では時刻表示というわかりやすいものですが、開発案件によっては検証しづらい値となることもしばしばあるかと思います。ドキュメントの重要さを感じました