Sollective サービスアップデート #2 | NextJS 導入による表示スピード向上と開発の基盤づくり
株式会社ソレクティブ（Sollective）の共同創設者兼 CPO のアレンです。Sollective は全員フルリモートで働いているスタートアップ企業で、効率的に事業を進めるためにコミュニケーションの透明性を大切にしています。
そのポリシーのもと、サービス設計と開発情報は、チームメンバーだけでなくユーザーのみなさんにも広くシェアしていきたいと思っています。
私たちプロダクトチームは、製品開発のロードマップに沿って Sollective のサービスアップデートの準備を行ってきました。フリーランスのみなさんにより快適にサービスを使っていただけるように、新機能や拡張機能がこのあと続々とリリースされる予定です。
今回は、Sollective のソースコードを Create React App から NextJS に移行した背景をお伝えしていきます。
Create React App から NextJS への移行
まず、私たちが実装したい新機能は、膨大な量のコードベースを完璧にリファクタリングする必要があると気付きました。さらに、Sollective のフロントエンドが、ユーザーのみなさんによってより快適な状態であり、開発を行なっている私たちにとってもよりスムーズな開発環境になるように、今回の移行は必要不可欠だと考えました。
最近の多くの Web アプリと同じく、Sollective は React で構築し、フレームワークは Create React App を採用してきました。React のおかげで、プロジェクトは大幅に簡素化され、開発の初期段階での時間を短縮することができたと思っています。
ですが、Sollective のプラットフォームが拡大していってる中、より高速で応答性の高いソリューションに切り替える必要があると判断し、NextJS への移行を実行することにしました。
なぜ NextJS を選んだのか？
Create React App はクライアントサイドでレンダリングして、Web ページを表示します。 簡単に言うと、ユーザーが使用しているブラウザが HTML や Javascript ファイルをロードし、DOM（HTML などを扱うための仕組み）の構築と、Web ページの表示を行います。
そのため、ネットワーク環境が悪かったり古い PC を使用していると、読み込み時間が長くなってしまうこともあります。
一方で NextJS は、静的ページと動的ページを組み合わせて生成することができます。そのため、リアルタイム更新を必要としないページの表示を高速化し、よりサクサクと Sollective の各画面を使っていただけるようになりました。
表示スピード向上と、新機能の基盤が完成
この改修作業は、3人のエンジニアチームで10,000行を超えるコードを変更した後、約1ヶ月かけて調査と設計を行い、無事リリースすることができました。
まだすべて最適化されたわけではありませんが、Sollective のページは以前よりも約10〜20％速く読み込みができるようになっています。
また、ソースコードの移行が完了したことによって、新しい機能を構築していくための基盤がもできました。今後も大きな機能追加をいくつか予定しているので、ぜひ今後も注目していただければと思います。
＊ ＊ ＊
Sollective は、「トップフリーランスの力でビジネスの可能性を広げる」をモットーに、やりがいと能力に見合った仕事を求める優秀なフリーランス・副業ワーカーと、多様化するビジネスの即戦力となるエキスパートを探している企業を直接つなぐプラットフォームです。もし、すこしでも興味を持っていただけたら、ぜひ登録いただけると嬉しいです。
