大規模レガシーアプリをNext.JSにリプレイスして、実際どんな恩恵があるのか
経緯
本業の方で、Next.JSを用いて開発、というか既存のレガシーな作りを取っ払ってNextにreplaceしちゃおうぜ計画を行っている。
その際に技術的に気になったことをメモしていく。できれば継続的に🐟
今回は、ついに一部の主要なページをNext.JS化することができたので、現時点で恩恵を得られたことをまとめる
リプレイス化の背景
僕のチームがNext.JS化に取り組んでいるアプリは、ローンチされてから10年以上経っており、時価総額数十億円規模の会社の売上の約９割を生み出している主軸サービスである。
FWはLaravelで、フロントエンドの技術は、HTMLがLaravelに備わっているblade、JavaScriptはJQuery（一部TypeScript）という構成だった。
流石に何年も溜まった技術的負債に、現状のいわゆるレガシーな技術でなんとかゴリ押していくことが次第に困難になっていた。
溜まった負債はPSI（Page Speed Insight）のパフォーマンスにも重大な影響を与え始め、且つエンジニアの採用という面においても、モダン技術を取り入れてないうちが競合他社に勝てるわけもなく、採用戦争も不利になる一方だった。
とはいえ、Next.JS化の話は数年前から度々出ていたものの、やるとなるとかなり大掛かりなテコ入れを行う必要があることは皆さんも想像に難くないでしょう。
そのため事業部サイドとの折り合いが中々つかずにズルズルと先延ばしになっていたのだが、色々あって（ここはまた別の記事で話すかも）今年の6月頃から本格的にプロジェクト化して取り組んでいたのである。
本当は軌跡とかもまとめたいが、今回の話の軸からは逸れるので、また後日に記事にするかもしれない。
目的
という背景があったため、Next.JS化する主な目的な以下であった。
- PSIの全項目、特にパフォーマンス部分の改善
- 技術スタックのモダン化により、エンジニア採用で他社との遅れをなくす
- 負債の軽減による開発生産性の向上
社全体的に、特に1を最重要目的として掲げた。
やはりパフォーマンスの向上はUXをより良いものにするし、SEOの評価軸の一つでもあるため、SEO点数UPを目標とするうちでは、この改善は至上命題であった。
まだリプレイスして間もなく、2と3の達成率は測れてないため、今回は割愛する。
Before / After
では早速、以下に実際にリプレイスが完了してる主要ページのPSIのBefore After画像を載せる。
-
ページA（PC）
-
Before
-
After
-
-
ページA（スマホ）
-
Before
-
After
-
-
ページB（PC）
-
Before
-
After
-
-
ページB（スマホ）
-
Before
-
After
-
-
ページC（PC）
-
Before
-
After
-
-
ページC（スマホ）
-
Before
-
After
-
-
ページD（PC）
-
Before
-
After
-
-
ページD（スマホ）
-
Before
-
After
-
なんと、結果的にほとんどの主要ページのスコアが大幅上昇！！🏆
特にスマホ画面のパフォーマンスは、どのページでもエグいくらいの伸び率を見せた🥇
フロントエンドのフレームワークを変えるだけで（変えること自体とても大変ではあったが）、ここまでパフォーマンスに大きな変革をもたらしてくれるのかと、リリース当初とても感動したことを覚えている。
こちら側が特にパフォーマンスのことを過度に意識しすぎなくても、ある程度パフォーマンスが早いものを作れることは、全世界の企業がフロント技術にNext.JSを採用する理由だとは思うが、実際に体感してみると確かに凄まじいものだった。
まとめ
もちろん全てのパフォーマンスの問題を解決してくれるものではなく、例えばサードパーティーライブラリによるTBT（Total Blocking Time）の問題は相変わらずだったり、サーバーの応答時間は影響を与えることはできないし、リプレイスしただけで問題が全て解決するわけではない。
リプレイスしたことによって、例えば、API通信量の増加によるセッション数、コネクション数の増加など、新たに考慮しなくてはならない問題などもあったりする。
ただ、リプレイス前にタスクとしてチームで持っていた、地球の国の数ほどあるタスクは、このリプレイスによってかなり削減することができたとというのもまた事実なのである。
それだけでも費用対効果は抜群だ。
主要ページのリプレイスは大体終わったというのは大きなことであり、大事な通過点だと思う。
これをベースにして、引き続き残りの問題の解決を頑張っていきたいと思う。
Discussion