概要

実案件でbfcacheについて色々大変だったことがあるのでメモがてら記事にしました。

bfcacheって知ってる？

bfcacheとはブラウザバックしたときに、直前のページの状態をそのまま使っちゃうもの。

bfcacheがあるおかげで、ページ遷移が爆速になって無駄なロードをさせないっていうめっちゃ利点ばっかなんだけど、今回はそれがたまたま邪魔してきた。。。

例えば「今の時間（サーバーの時間）」を使ったプログラムを書くとき。
DOM上にサーバーからの時間（サーバーの今の時間）を描画し、jsでその値を元にプログラムを組む場合。

ページロード時は正常な値が描画されるけど、ブラウザバッグしたときは正常な値が出ない。。。

そのページにこのjsを入れる。

window.addEventListener('beforeunload', () => {});

※最適解ではないです

最適解ではない理由はそのページにおいてbfcacheを完全に無効にするからです。
ユーザー体験的にはbfcacheを無効にするのは絶対良くない。。。

おそらく一番良いのはバックエンドがわでAPIを用意し、ブラウザバックの時に叩いて置き換えるというもの。

 window.addEventListener('pageshow', (event) => {
     // bfcacheかそうじゃないか
    if (event.persisted) {
      // API叩くコマンド
    }
  });

pageshowイベントの中で、bfcacheがあるかないかが内包されてるので、それを条件にAPI叩いくのがいいと思います！