BFCacheを活用して無限スクロールのUX を改善した話

BFCacheを活用して無限スクロールのUX を改善した話エンジニアとデザイナーで考えるUI/UX LT会@FE Yatai やなぎ @apple_yagi

やなぎ PR TIMES フロントエンドエンジニア X: @apple_yagi 好きな UI ライブラリは Base
UI です

無限スクロールを実装したことある人

https://gigazine.net/news/20260217-eu-kill-infinite-scrolling/ 余談

https://prtimes.jp/main/action.php?run=html&page=searchkey&search_word=fusic 私が実装した無限スクロールUI

元々 jQuery で実装されていたページを Next.js（Pages Router）にリプレイス検索結果のリンクは next/link を使っていないソフトナビゲーション（SPA遷移）ではなくハードナビゲーション ↑ここ大事
私が実装した無限スクロールUI

実装はできたが問題が。。

ブラウザバックすると読み込んでいたデータが消える

スクロール位置や読み込んだデータをページ遷移前に sessionStorage とかに保存してブラウザバック時に復元する？ URL にスクロール位置をクエリパラメータ（例：?page=5）に保存しておいてブラウザバック時にそのページのデータをfetchする？実装が複雑になるなどうやって改善するか

色々調べているととある記事を発見

これか？！

バックフォワードキャッシュ（bfcache）では、ユーザーがページから移動したときにページを破棄するのではなく、破棄を延期して JS の実行を一時停止します。ユーザーがすぐに戻った場合は、ページを再び表示し、JS の実行を再開します。これにより、ユーザーはほぼ瞬時にページを移動できます。 https://web.dev/articles/bfcache?hl=ja BFCache
とは

ブラウザバック時に JS の実行を再開することができる読み込んだデータを保持できる（React の useState の状態も復元できる）スクロール位置も保持することができる BFCache を有効にすることで

unload イベントは使用しない Cache-Control: no-store を使用しないページ遷移する前に IndexedDB 接続や fetch/XMLHttpRequest、WebSocket など
を切断する next dev でサーバーを立ち上げた場合、WebSocket が使用されているので BFCache は効かない。開発環境でも next start で立ち上げて確認する必要がある https://web.dev/articles/bfcache?hl=ja#optimize ※ ブラウザの種類やインストールしている拡張ツールによって挙動が変わるので確実に BFCache を有効にするのはむずかしい BFCache を有効にするためには

検証ツール → アプリケーションタブ → バックフォワードキャッシュ BFCache が有効になっているか確認する（Chrome）

Cache-Control に no-store が設定されてるな

リプレイス前の Cache-Control ヘッダーを参考にしていたが経緯が不明 Cache-Control: private, no-cache, no-store, max-age=0, must- revalidate
になっていたので絶対にキャッシュしたくないんだろうなという意思は感じる社内で検討した結果、外しても問題なさそうだったので no-store を削除そもそも Cache-Control: no-store が必要か

Cache-Control: no-store ブラウザやCDNなどのキャッシュサーバーに、レスポンスの保存を一切許可しない Cache-Control: no-cache ブラウザやCDNがレスポンスをキャッシュすることは許可するが、再利用する前に必ずサーバーへそのキャッシュが有効か問い合わせ（検証）を行う no-cache と言いつつキャッシュを許可するので注意
補足：no-store と no-cache の違い

再度 BFCache が有効になっているか確認すると

https://prtimes.jp/main/action.php?run=html&page=searchkey&search_word=fusic 実際にスクロール位置が保持されるか確認

トップページのスマホビュー弊社で BFCache を有効活用している他事例

無限スクロール、ブラウザバック時にデータ消える問題を BFCache を利用して解決した BFCache を有効にすることでブラウザバック時に JS の実行を再開することができる BFCache
を有効するためには unload イベントや、 Cache-Control: no-store を使用しない ※ 今回はハードナビゲーションのページ遷移時の BFCache の有効化について説明しました。ソフトナビゲーション（SPA遷移）の場合は BFCache を有効にしてもうまくいきません。まとめ

BFCacheを活用して無限スクロールのUX を改善した話

BFCacheを活用して無限スクロールのUX を改善した話

Ryuya Yanagi

More Decks by Ryuya Yanagi

Other Decks in Technology

Featured

Transcript