Nuxt.js で静的サイト生成時に不要な JavaScript を含めないやり方

背景

Nuxt.js で静的サイトを generate して Netlify などにデプロイしたい。
asyncData で API を実行してデータを取得するが、生成したサイトには API 情報を含めたくない。
(生成に使った後は不要になる場合)
ローカルでの開発も普通に行いたい。

結論

if (process.server) {}　内で処理する。

  async asyncData({ $axios }) {
    if (process.server) {
      const res = await $axios.get(
        'https://<tekitou>.microcms.io/api/v1/items',
        {
          headers: {
            'X-API-KEY': 'aaaaaaa-bbbb-cccc-dddd'
          }
        }
      )
      return {
        items: res.data.contents
      }
    }
  }

確認方法

yarn generate などで生成した dist ディレクトリ内を検索する。
上記の場合だと X-API-KEY が含まれていないことを確認。

その他いろいろ

• process.static でも良いが、ローカルでの開発時(yarn dev)に実行されなくなってしまう。
• 静的サイト生成なので mode: 'universal' が前提
• if 文が無いと、生成したサイトはブラウザで問題無く見えるが javascript に含まれてしまう