GatsbyJSで作っているブログのFOUC対策をしたFOUC とはFOUCとは、flash of unstyled contentの略で、CSSが適用されていない状態が一瞬表示された後にCSSが適用されることでチラつく現象のこと。 事象このブログにおいては、ヘッダーの部分がリロードを繰り返す度にロゴがガタっとなって、チラついていた。 やったことちょうどヘッダーだけMaterial-UIのコンポーネントに変えていたので、GatsbyJSとMaterial-UIの組み合わせが怪しそうだということで、調査してみるとまさしくなIssueがヒットした。 Flicker of Unstyled Content (FOUC) with Gatsby and Material UI · Issue #15097 · gatsbyjs/gatsby その中でGatsbyのコントリビュータの対応策のコメントを見つけた。SSRするページでMaterial-UIの
