【Next.js】ハイドレーションエラーSuspenseで解決

  • 投稿日
  • 著者 IF233
  • カテゴリー Next.js

非同期データの取得はuseEffectかSuspenseで管理

ハイドレーションエラー

ハイドレーションの流れとエラー 1. SSR HTMLを生成 {“name”: “John”} {“time”: “12:00”} 2. 初期HTML表示 ブラウザ表示 {“name”: “John”} {“time”: “12:00”} 3. ハイドレーション Reactの初期化 {“name”: “John”} {“time”: “12:01”} 一般的なエラーと解決策 ⚠️ window/documentの使用 ✅ useEffectで初期化 ⚠️ 日時の不一致 ✅ サーバー時刻の固定 ⚠️ 非同期データ ✅ Suspense使用 主なポイント 1. サーバー/クライアントの一致確認 2. 適切なローディング状態の管理

Suspenseが効果的な場合

  • 非同期データの取得待ち
  • 動的インポート
  • 画像やその他のリソースのロード待ち
Suspense による制御 Loading… データ取得中 表示完了