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のハンドリングができていないので、その対策として gatsby-plugin-material-ui を入れると良いとのこと。
ドキュメントに従い、インストールして、 gatsby-config.js で読み込ませた。
console
$ npm install -S gatsby-plugin-material-ui
gatsby-config.js
module.exports = {
...
plugins: [
...
"gatsby-plugin-material-ui",ローカルでは動作確認できないので、デプロイした上で、確認したところ、チラつかなくなった🎉
さいごに
まだ一部しかMaterial-UIへの移行が済んでおらず、Semantic UIのコンポーネントにおいても同様にFOUCが発生しているのに気づいたが、こちらはMaterial-UIに移行していく予定なので、未対策のままいくことにした。デザインを整えつつ、徐々に移行をやっていくぞ💪
