MENU
  1. ホーム
  2. Next.js
  3. 【Next.js】ハイドレーションエラーSuspenseで解決

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

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… データ取得中 表示完了
Next.js

関連記事

目次