⇨ Vue 記事の目次はこちら

Nuxt.js で直打ち URL や画面更新をしたときに、デプロイ時のデータが常に表示されて、デプロイ後に追加されたデータが反映されない時の対処法についてまとめました

環境
Nuxt2.15.7

結論

SSG になっている可能性が高いです。

nuxt.config.js を修正

SSG のとき

{
  mode: 'universal',
  target: 'static',
}

となっているのを、

SSR

{
  mode: 'universal',
  target: 'server',
}

または、SPA

{
  mode: 'spa',
  target: 'static',
}

に変更してください。

SSG とは？

「静的サイトジェネレータ」というらしいです。

つまり、静的なサイトに向いたやつということです。

デプロイ時に必要なデータを取得して json に格納しそれを表示に使っている

つまり、ユーザーが来るたびにデータベースからデータをとってくるのではなく、デプロイ時に１回だけ接続すれば良いということです。

つまり速い

つまり速いです。

このブログは Nuxt ではないですが、SSG でできています。

今回の事例は、つまりどういうことだったか？

追加したデータを取得してこないのは、そのページで更新をしてもデータベース接続していない。

この時点では、ブラウザのキャッシュや、サーバー側で検索結果をキャッシュしている（時間で計算し直す説）可能性があったりする。

デプロイ時のデータが常に表示されるということなので、デプロイ時にデータをまとめて取得していることが分かった。

前述の説明を読んでいればわかる通り、SSG の特徴に合致するので、nuxt.config.js を SSR に修正したら想像通りの挙動に直った！

まとめ

以上、デプロイ時のデータが常に表示されてしまう問題の解決方法と SSG についてでした！

Nuxt はめっちゃ便利です。VueCLI やるくらいなら Nuxt だと思います！

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！