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

Transcript

1. BFCacheを活用して無限スクロールのUX を改善した話 エンジニアとデザイナーで考えるUI/UX LT会@FE Yatai やなぎ @apple_yagi
2. やなぎ PR TIMES フロントエンドエンジニア X: @apple_yagi 好きな UI ライブラリは Base UI です
3. 無限スクロールを実装したことある人
4. https://gigazine.net/news/20260217-eu-kill-infinite-scrolling/ 余談
5. https://prtimes.jp/main/action.php?run=html&page=searchkey&search_word=fusic 私が実装した無限スクロールUI
6. 元々 jQuery で実装されていたページを Next.js（Pages Router）にリプレイス 検索結果のリンクは next/link を使っていない ソフトナビゲーション（SPA遷移）ではなくハードナビゲーション ↑ここ大事 私が実装した無限スクロールUI
7. 実装はできたが問題が。 。
8. ブラウザバックすると読み込んでいたデータが消える
9. ブラウザバックすると読み込んでいたデータが消える
10. スクロール位置や読み込んだデータをページ遷移前に sessionStorage とかに保存 してブラウザバック時に復元する？ URL にスクロール位置をクエリパラメータ（例：?page=5）に保存しておいてブ ラウザバック時にそのページのデータをfetchする？ 実装が複雑になるな どうやって改善するか
11. 色々調べているととある記事を発見
13. これか？！
14. バックフォワード キャッシュ（bfcache）では、ユーザーがページから移動したと きにページを破棄するのではなく、破棄を延期して JS の実行を一時停止します。 ユーザーがすぐに戻った場合は、ページを再び表示し、JS の実行を再開します。 これにより、ユーザーはほぼ瞬時にページを移動できます。 https://web.dev/articles/bfcache?hl=ja BFCache とは
15. ブラウザバック時に JS の実行を再開することができる 読み込んだデータを保持できる（React の useState の状態も復元できる） スクロール位置も保持することができる BFCache を有効にすることで
16. 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 を有効にするためには
17. 検証ツール → アプリケーションタブ → バックフォワードキャッシュ BFCache が有効になっているか確認する（Chrome）
18. Cache-Control に no-store が設定されてるな
19. リプレイス前の Cache-Control ヘッダーを参考にしていたが経緯が不明 Cache-Control: private, no-cache, no-store, max-age=0, must- revalidate になっていたので絶対にキャッシュしたくないんだろうなという 意思は感じる 社内で検討した結果、外しても問題なさそうだったので no-store を削除 そもそも Cache-Control: no-store が必要か
20. Cache-Control: no-store ブラウザやCDNなどのキャッシュサーバーに、レスポンスの保存を一切許可しな い Cache-Control: no-cache ブラウザやCDNがレスポンスをキャッシュすることは許可するが、再利用する前 に必ずサーバーへそのキャッシュが有効か問い合わせ（検証）を行う no-cache と言いつつキャッシュを許可するので注意 補足：no-store と no-cache の違い
21. 再度 BFCache が有効になっているか確認すると
23. https://prtimes.jp/main/action.php?run=html&page=searchkey&search_word=fusic 実際にスクロール位置が保持されるか確認
24. トップページ のスマホビュー 弊社で BFCache を有効活用している他事例
25. 無限スクロール、ブラウザバック時にデータ消える問題を BFCache を利用して 解決した BFCache を有効にすることでブラウザバック時に JS の実行を再開することが できる BFCache を有効するためには unload イベントや、 Cache-Control: no-store を 使用しない ※ 今回はハードナビゲーションのページ遷移時の BFCache の有効化について説明し ました。ソフトナビゲーション（SPA遷移）の場合は BFCache を有効にしてもうま くいきません。 まとめ