セッション確認結果をキャッシュして再読み込み時の待機表示を減らす

[hirokisakabe]

Status: Draft

概要

Web のセッション確認結果をブラウザ内に短時間キャッシュし、再読み込みやクライアント遷移のたびに認証確認待ちの画面が出る時間を減らす。

背景 / モチベーション

#221 で認証確認中の表示は追加されたが、再読み込みのたびにセッション API の完了を待つ。TanStack Query の永続化機能などを候補に、UX を改善しつつ、期限切れセッションや別ユーザーの情報を誤表示しない設計が必要。

「白画面をゼロにする」ことよりも、キャッシュを信頼できる範囲とサーバー再検証のタイミングを明確にする。

受け入れ条件

• 決定したキャッシュ方式・保存対象・有効期限がコードまたは設計コメントで明確になっている
• 有効なキャッシュがある場合、再読み込み時の認証確認待ち表示が短縮される
• バックグラウンドでサーバーのセッションを再検証する
• 期限切れ・無効なセッションでは保護画面を継続表示せず、ログイン画面へ遷移する
• ログアウト時に永続化した認証キャッシュとユーザー固有データが削除される
• Bearer トークン、Cookie、その他の再利用可能な認証情報を Web Storage に保存しない
• キャッシュの破損・スキーマ変更・期限切れ時に安全に破棄できる
• 別タブ・別ユーザー・401 応答時の挙動が決定した方針と一致する
• 再読み込み、ログアウト、期限切れ、破損キャッシュの挙動を自動テストで確認できる
• lint・format-check・typecheck・test が成功する

Ready にするための未決事項

• キャッシュ済みセッションで保護画面を先に描画するか、サーバー再検証完了まで待つか決める
• セッション query だけを保存するか、QueryClient 全体を対象にするか決める
• 保存先（sessionStorage 等）、最大保持時間、キャッシュキーのバージョニングを決める
• logout・401・ユーザー切り替え・別タブでの無効化方針を決める
• キャッシュ中のユーザー情報をどこまで保存してよいか決める

スコープ外

• セッション API 自体の高速化
• 認証トークンの Web Storage への保存
• Mobile / CLI のセッションキャッシュ
• オフラインでの認証保証

実装メモ

• persistQueryClient は候補であり、未決事項の結論によっては採用しない
• sessionStorage を使う場合も、同一タブ内の期限・logout・401 による削除が必要
• get-session レスポンスからセッショントークンを除外する #256 により get-session レスポンスから再利用可能なトークンは除外済みだが、ユーザー情報の stale 表示には引き続き注意する

完了形

方針確定後に実装 PR を作成し、上記の受け入れ条件を満たした時点で完了とする。

参考

• ページ遷移時のローディング表示を追加（beforeLoad の白画面対策） #221
• get-session レスポンスからセッショントークンを除外する #256
• TanStack Query: persistQueryClient