SWSRSSR という1フレーム技

Service Worker Side React Server Side Rendering

ServiceWorker内でBabelを駆使して、JavaScriptをビルドする - ログミーTech(テック)

ってスライドの中で、React の SSR を Service Worker の中でやれば、SEO は死んじゃうけど First Meaningful Paint 最適化できるよねーっていう話をしました。

というわけで実装してみました。すごく単純な React + Redux の Counter です。

ここで試せる https://epic-cray-a9cff8.netlify.com

実装コード https://github.com/mizchi-sandbox/swsrssr

DevTools 見る限り、 FMP が 8ms で返ってます。TTI (JSが動くようになる時間) は JSの評価が終わる 150ms ぐらい。 ただ、ネットワーク全く使わないかわりに、処理速度が完全にCPU依存なので、モバイルだとここまではならないとは思います。

これはブラウザの標準的なフレームレートの16ms未満なので、リロードしたことをほぼ認識できない速度です。

この路線がありか、まだわからないけど、夢がありますね。やはり SW 用の express emulator 作ったほうがいい気がする。