§15-10Perceived Performance
Suspense fallback
読み込み中の領域だけを代替表示に置き換える。
ページ全体ではなく読み込み中の部分だけ代替表示にし、残りは先に使える。重い部品が一部だけあるページで、待ち時間の体感を短くする。
実装のポイント
Suspense 境界は独立して読み込める単位で切り、fallback は最終レイアウトと同じ寸法にする。境界を細かくしすぎると段階的なちらつきが増える。
- 特徴
- 非同期
- デモで使っているもの
- shadcn/ui
- lucide-react