react-fontawesome でページ読み込み時に一瞬だけアイコンが大きくなる問題
追記 2022-02-15
@fortawesome/fontawesome-svg-core を 6.0.0 に上げたところ、このブログではうまく動かなくなった。改めて対処方法を調べているうちに、gatsby-plugin-fontawesome-css という GatsbyJS 向けのプラグインを発見。やっていることの大筋はおそらくこの記事で紹介した内容と変わらないものの、入れてみたらうまく動いてくれたのでそれ以上は深追いせず解決とした。
装飾のためにこのブログに導入したところ、問題が起きるようになったため調査した。react-fontawesome の Issue とそこから辿れる公式のドキュメントに辿り着いた。
- Over sized icons on each page refresh · Issue #134 · FortAwesome/react-fontawesome
- Server Side Rendering | Font Awesome
要するに、アイコンが大きくなるのは CSS が適用されていないために起きているらしい。デフォルトだと autoAddCss
というオプションが true
になっていて動的に CSS が読み込まれるのだが、サーバサイドレンダリングなどでアイコンが埋め込まれた HTML が生成されている場合には CSS の適用が間に合わないようだ。GatsbyJS を使う場合もアイコンが埋め込まれた HTML が事前に生成されることになるので、autoAddCss
では間に合わない。このような原因なので、開発中には問題にならず、プロダクションのビルドでのみ顕在化する。
解決策としては、autoAddCss
による CSS のロードを無効化し、代わりに CSS がアイコンよりも先にロードされるように埋め込めばよい。具体的なコードは先程の Issue のコメントにあった。
layout.js
的なファイルに以下のコードを入れてあげることで、強制的に CSS がアイコンよりも先にロードされるようになり、問題は生じなくなった。
サーバサイドレンダリングは、もろもろの事情のために無茶なことをしているという感覚はある。そう考えると、デフォルトのままだとサーバサイドレンダリングで不具合が生じるのはまあ仕方ないか。GatsbyJS を使うと自動的にサーバサイドレンダリングと似たような状況になるので、それによってつらさが生じやすいというのはあるかもしれない。