§15-06Perceived Performance
Optimistic UI
通信の完了を待たずに結果を先に表示する。
操作の結果をすぐ画面に反映し、通信待ちを感じさせない。いいねや既読など、失敗が少なく取り消しも容易な操作で効果が大きい。
実装のポイント
送信直後に仮 ID で一覧へ追加し、確定時にサーバー ID で置き換える。楽観更新は失敗時のロールバックと再送導線を先に設計しておく。
- 特徴
- 楽観的更新
- 非同期
- デモで使っているもの
- shadcn/ui
- lucide-react
§15-06Perceived Performance
通信の完了を待たずに結果を先に表示する。
操作の結果をすぐ画面に反映し、通信待ちを感じさせない。いいねや既読など、失敗が少なく取り消しも容易な操作で効果が大きい。
送信直後に仮 ID で一覧へ追加し、確定時にサーバー ID で置き換える。楽観更新は失敗時のロールバックと再送導線を先に設計しておく。