GatsbyJSで作っているブログのFOUC対策をした

2020-06-18

FOUC とは

FOUCとは、flash of unstyled contentの略で、CSSが適用されていない状態が一瞬表示された後にCSSが適用されることでチラつく現象のこと。

事象

このブログにおいては、ヘッダーの部分がリロードを繰り返す度にロゴがガタっとなって、チラついていた。

FOUC

やったこと

ちょうどヘッダーだけ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 を入れると良いとのこと。

hupe1980/gatsby-plugin-material-ui: Gatsby plugin for Material-UI with built-in server-side rendering support

ドキュメントに従い、インストールして、 gatsby-config.js で読み込ませた。

console
$ npm install -S gatsby-plugin-material-ui
gatsby-config.js
module.exports = {
  ...
  plugins: [
    ...
    "gatsby-plugin-material-ui",

ローカルでは動作確認できないので、デプロイした上で、確認したところ、チラつかなくなった🎉

FOUC対策後

さいごに

まだ一部しかMaterial-UIへの移行が済んでおらず、Semantic UIのコンポーネントにおいても同様にFOUCが発生しているのに気づいたが、こちらはMaterial-UIに移行していく予定なので、未対策のままいくことにした。デザインを整えつつ、徐々に移行をやっていくぞ💪

キクナントカ

ソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。詳しくはこちら