🐡
Next.jsでMUIを利用するときに注意すること
Next.js の SSR で MUI を利用する場合に注意すること
公式ドキュメントのServer Side Renderingにあるように、MUI は SSR で利用できるように設計されていますが、ユーザーが正しく統合させる必要があります。
Next.js の SSR では、サーバーが HTML を生成してクライアントに送ります。
このとき、MUI System で生成された CSS スタイルを HTML に正しく組み込む必要があります。
正しく組み込むことができていない場合、以下のような問題が発生します。
- CSS が <head> に含まれず、<body> にレンダリングされる可能性がある
- スタイルが正しく適用されない、またはレイアウトが崩れるリスクがある
- 一瞬スタイルが適用されずにちらつきが発生する可能性がある
AppCacheProvider の役割
AppCacheProvider コンポーネントは、MUI System が生成する CSS を収集し、それを適切に <head> に挿入する役割を持っています。これにより、以下を実現できます。
- CSS が <head> に入る
- ブラウザは HTML を読み込む際に最初に <head> の CSS を適用するため、パフォーマンスと視覚的な安定性が向上します
- スタイルの重複や順序の問題を防ぐ
- <body> にスタイルが出力されると、CSS の読み込み順や優先順位に問題が生じる場合があります。
AppCacheProvider の利用が推奨される理由
- MUI System のスタイルが <head> にないと、クライアントサイドで再描画が発生する可能性がある。
- 再描画の発生は、Flicker（画面が一瞬崩れる現象）やパフォーマンス低下の原因になる。
したがって、AppCacheProvider を使用することで、SSR とクライアントサイドの動作がシームレスにつながり、スタイル適用に関する問題を防ぐことができます。
Discussion