Next.js App RouterにおけるFOUCの理解と修正（2025年版ガイド）

FOUC（Flash of Unstyled Content）は、Reactアプリケーションでの視覚的なグリッチで、ロード中の短時間にスタイルが適用されていないコンテンツが現れる現象です。これは、サーバー側でレンダリングされたHTMLとクライアント側でレンダリングされたUIとの不一致、特にNext.jsのようなフレームワークでのみ発生します。症状として、スタイルが適用される前に生のHTMLが表示されることや、CSS変数が即座に適用されないことが挙げられます。動的テーマ、共有コンポーネントでの`Date.now()`や`Math.random()`の使用、CSSライブラリの遅いインポートなどが一般的な原因です。FOUCを修正するには、`layout.tsx`でグローバルCSSを常にインポートして、スタイルを早期にロードすることを保証します。`globals.scss`にフォールバックのテーマスタイルを提供することで、フラッシュする要素を防ぐことができます。ハイドレーションガードを使用して、クライアントがタケオーバーするまでレンダリングを遅延させることで、不一致を防ぐことができます。動的CSSインポート、`Date.now()`や`Math.random()`の直接的なレンダリング、サーバーコンポーネントでの`localStorage`や`window`の読み取りを避ける必要があります。サーバーロジックとクライアント固有のレンダリングを分離することで、スタイルのフラッシュとハイドレーションワーニングを排除することができます。