Vue
Nuxt.jsでデプロイ時のデータが常に表示されて更新が反映されない時の対処法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
PR
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 に格納しそれを表示に使っている
つまり、ユーザーが来るたびにデータベースからデータをとってくるのではなく、デプロイ時に1回だけ接続すれば良いということです。
つまり速い
つまり速いです。
このブログは Nuxt ではないですが、SSG でできています。
今回の事例は、つまりどういうことだったか?
追加したデータを取得してこないのは、そのページで更新をしてもデータベース接続していない。
この時点では、ブラウザのキャッシュや、サーバー側で検索結果をキャッシュしている(時間で計算し直す説)可能性があったりする。
デプロイ時のデータが常に表示されるということなので、デプロイ時にデータをまとめて取得していることが分かった。
前述の説明を読んでいればわかる通り、SSG の特徴に合致するので、nuxt.config.js を SSR に修正したら想像通りの挙動に直った!
まとめ
以上、デプロイ時のデータが常に表示されてしまう問題の解決方法と SSG についてでした!
Nuxt はめっちゃ便利です。VueCLI やるくらいなら Nuxt だと思います!
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは!
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。