SPAでのキャッシュの闇
というか自分の失敗なんですけど。
今回の話は具体的にはNuxt2系でクライアント側でキャッシュしてみてのやらかしです。ひとことで言うと
「自分でちゃんと後始末しなきゃだめ」
仕組みはこうです。
- Vuexにキャッシュ用のstateを用意。
- キャッシュ用stateが空の場合はサーバーからデータを取得してセット。
- キャッシュ用stateに値がセットされていればそれを返す。
(ほぼ)変更が無い値の場合、これで無駄なサーバーからのデータ取得をなくすことができます。
「翌日に反映されれば問題ない」位のものまでこの方式で扱っていました。
ある朝、トラブル発生の連絡がきました。前日に設定した値について反映されている端末とされていない端末があるとのこと。
こういう場合はだいたいキャッシュが原因です。
キャッシュってのはそもそもトラブルの元です。
でもパフォーマンスのためにはやっちゃうんだ。
お気づきですね。キャッシュの後始末をするのをすっかり忘れてました。毎日ブラウザが終了・起動されていると思ってはいけないのです。
業務で使用されているPCについては終業時にスリープさせて帰るということはあまりないので反映されていたのですが、タブレットの場合は基本的にブラウザ上がりっぱなしですので古いキャッシュがずっと残りっぱなしになっていたのです。
Webアプリの開発中は習慣で頻繁にブラウザをリロードするのでそれで消えるんですよね(言い訳)
んで後始末を忘れてるのに気づかずにリリースして事故ったり(闇)
以上です。
タグ: Nuxt.js
