gatsbyとstyled-componentsでのFOUC問題

このホームページは、gatsbyのフレームワークを利用して制作しています。

また、デザインに関してはCSS in JSの一種であるstyled-componentsを利用しています。

しかし、公開当初に以下のように初回アクセス時に一瞬デザインが当たらない素の状態で画面が表示されるという問題が発生しました。

1秒ほどでしっかりとCSSがあたった状態に切り替わって表示されるものの、このように画面がちらついてしまうのは体験的にあまり望ましくない状態ですね。

styled-components自体が通常のCSSと比較すると特殊な実装であることは理解していたので、おそらくここが原因であろうということで重点的に調査を行いました。

まさにドンピシャの状態に陥っている方をこちらで発見し、無事に解決。

解決策としてはシンプルで、gatsby-plugin-styled-componentsをインストールするだけで無事に解決することができました。

gatsby-plugin-styled-componentsは、「npm install gatsby-plugin-styled-components」でOKです。

gatsby-config.jsの更新も忘れないようにしましょう。