結論
React製の超シンプルなWEBページを静的サイトジェネレータ「React Static」で静的ページにしたけど、別に速くならなかった
https://speed-test-react.netlify.com/
https://speed-test-react-static.netlify.com/
背景
コンポーネント指向の書き方が大好きなので、全然状態の変化しないフツーのサイトもReactで書きたくなりました。
ただ、表示が遅くなりそう...
ただ、誰がいつ見ても同じ内容なのに、一々ブラウザのJSでレンダリングしてもらうなんて...
静的サイトジェネレータを使えば、高速表示のままReactで開発できるのでは...?
やったこと
画像とテキストが並ぶ超シンプルなSP前提のWEBページをReactとReact Staticで作ってみました。
Ajax通信も一切ありません。
React版
https://speed-test-react.netlify.com/
https://github.com/IYA-UFO/speed-test-react
- React
- create-react-app
- styled-components
- BootStrap4のCSS
- 合計700KB程度の画像 一部別サーバー
React Static版
https://speed-test-react-static.netlify.com/
https://github.com/IYA-UFO/speed-test-react-static
上記＋React Static
比較ツール
パフォーマンス測定超初心者なので、ググりながらやりました。
Chrome devtools ダウンロード速度10MB CPU4倍遅い設定(MacBook Pro)
比較観点
静的ページ、特にマーケティング系のページにとって、重要なのはファーストビューがちゃんと見えるまでの時間です。
それを比べたい、
...いざ、勝負
結果
Chrome devtools Performanceタブ
変わらねぇええ!!
画面左端がindex.htmlを取得した瞬間です。これより前の出来事にフロントエンドは関係ありません。
上の波みたいなのがCPUの使用量を示します。
大雑把に以下です。
- 青 HTMLパース
- 黄色 JS実行
- 紫 CSS適用
よく見ると、React側はレンダリング前に50msほどJSの実行時間があります。これが心配していた「遅延」です。
React Staticは、その賢い仕様上、HTML、CSSの処理が終わった後にイベントなどを処理するJSをマウントしています。ただ、今回は活躍の機会はありません。
Chrome devtools Networkタブ
ちょっと...違う..?
今回のページにはファーストビューにヒーローイメージ？(320KBのやつ)があるので、その子の表示が体感速度のカギとなります。
React側はmain.jsによるHTML生成が終わるまでヒーローイメージをリクエストできないのに対し、React Staticは最初からMax6本リクエストを出していると思われます。おかげで700msほど？速く落とせています！
見た目
変わらねぇええ
主題はファーストビューの高速表示でしたが、複数回やれば逆転するレベルで同じです。
React＋styled-componentsが裏でこそこそ何しているのかは知りませんが、React Staticは古き良きHTML⇨CSS追加の表示ですね。
結論
超シンプルなReactアプリケーション？を静的ジェネレータにかけても、表示がすごく速くなることはない。
感想
パフォーマンスの測定
dentoolsの表示の２割も理解していません。ブラウザの動きを深く知らないとキビシイ世界のようです。
devtoolsの見方を体系的に学びたい...
静的サイトジェネレータ
今回のReactさんは50msでHTMLを出しましたが、本格的なReactアプリケーションでは数秒かかることも珍しくないと思います。静的サイトでも本格的に運用すれば数十のコンポーネントを使うわけで、そのとき、静的サイトジェネレータの真の力が唸るのかもしれません。
もちろん、CMSからAjaxでデータを取得する場合、ジェネレータによる事前ビルドの効果は明らかでしょう。
おわりに
ブラウザのことよく知らないのに背伸びしました。仮説、間違いのご指摘、なんでも全力で歓迎いたします。
それまで、Reactでいいや