ホーム

転職ドラフト(次回10/20)

Nuxt.jsでデプロイ時のデータが常に表示されて更新が反映されない時の対処法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

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

環境
Nuxt2.15.7

目次

  1. 結論
  2. SSG とは?
  3. 今回の事例はつまりどういうことだったか?

結論

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

nuxt.config.js を修正

SSG のとき

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

となっているのを、

SSR

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

または、SPA

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

に変更してください。

SSG とは?

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

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

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

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

つまり速い

つまり速いです。

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

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

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

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

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

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

まとめ

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

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

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

それでは!