セッション確認結果を sessionStorage にキャッシュして白画面をゼロに（persistQueryClient 活用）

[hirokisakabe]

Status: Draft
Depends on: #221

概要

beforeLoad で毎回 API を呼ぶ代わりに、TanStack Query の persistQueryClient でセッション確認結果を sessionStorage に永続化し、リロード時も即座にルーティング判定できるようにする。

背景 / モチベーション

• issue ページ遷移時のローディング表示を追加（beforeLoad の白画面対策） #221 で pendingComponent による loading 表示を追加したが、毎回スピナーが表示される体験は依然として残る
• Cloud Run コールドスタート以外の通常リロード時でも一瞬ちらつく
• セッション確認結果をキャッシュしておけば、2回目以降のアクセスでは白画面もスピナーも不要になる

受け入れ条件

• 一度ログイン後にリロードした場合、白画面・ローディングスピナーが表示されずに即座にページが表示される
• セッション失効後にリロードした場合、/login へ正しくリダイレクトされる
• sessionStorage を削除した場合（= キャッシュなし状態）でも正常に動作する

スコープ外

• localStorage への永続化（タブをまたいだキャッシュ共有）
• コールドスタート初回アクセス時の高速化（キャッシュがないため効果なし）

実装方針

1. authClient.getSession() の呼び出しを TanStack Query の useQuery / useSuspenseQuery に乗せる（現状は beforeLoad で直接呼んでいる）
2. @tanstack/react-query-persist-client + @tanstack/query-sync-storage-persister を導入
3. persistQueryClient に sessionStorage persister を設定し、セッションクエリのキャッシュを永続化
4. リロード時はキャッシュから即復元 → バックグラウンドで再検証（SWR パターン）

// main.tsx イメージ
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

const persister = createSyncStoragePersister({ storage: window.sessionStorage })
persistQueryClient({ queryClient, persister })

参考

• ページ遷移時のローディング表示を追加（beforeLoad の白画面対策） #221（pendingComponent による loading 表示、先行対応）
• persistQueryClient ドキュメント
• createSyncStoragePersister