管理画面はSPAでも十分である理由！📊

みなさん、お久しぶりです。
nakamoto（@zksytmkn）です！

今回はWebアプリケーションの管理画面を作るならSPA（single-page application）で十分であるという技術的なお話をさせていただきます。

今年の1月ごろRemixがv2.5でSPAモードをリリースしたことをきっかけに、こちらの記事を執筆しております。Remix SPAモードを簡単にご説明するとサーバーサイドのJS環境が不要でブラウザ側にすべてを任せることになる、あの頃のReactです。

https://remix.run/docs/en/main/future/spa-mode

Reactは流行った当初、CSR（Client-side Rendering）に基づきSPAを構築することを目指してました。CSRでは、まずユーザーがWebサーバーから1つのHTMLファイルと1つのJSファイルを受け取ります。その後、JSファイルのReactコードがブラウザ上で実行され、特定のHTML要素（通常は<div id="root"></div>）にReactコンポーネントをマウントし、アプリケーションのUIを動的に生成し表示します。

JSファイル（バンドルしたときに生成されます）にはルーティングの情報も含まれており、ページ遷移もブラウザ側で解決されます。その為、ユーザーがページを移動する度にWebサーバーから新たなHTMLファイルを取得する必要がありません。

それによって、UXが向上します。このレンダリングの性質をCSR（Client-side Rendering）と呼び、1つのHTMLファイルで動作するアプリケーションをSPA（Single Page Application）と呼びます。

しかし、SPAには下記のような問題点もありました。

• 初期ロード時間の問題

• SEOとOGPの問題

初期ロード時間の問題は、必要なリソース全てが1つのJSファイルにバンドルされてるため、ロード時間がとても長くなってしまうということです。その間ユーザーはローディング画面を見続けることになります。

SEOとOGPの問題は、検索エンジンとSNSのクローラーはJSのレンダリングに完全に対応しておらず、SEOに悪影響が生じたり、SNSのリンク共有時にタイトルや画像が正確に表示されないということです。

SPA（とCSR）のこれらの問題を解決するためにSSR（Server Side Rendering）が導入されましたが、管理画面のように社内使用がメインでSEOやSNS戦略が重要でない場合、SPAの利用が適してることがあります。認証後、SPAではユーザーの操作に応じたデータの読込や更新がブラウザ上で行われ、サーバーとの通信は必要最小限になります。これにより、全体のページリロードが不要となり、スムーズなユーザー操作が可能になります。

まとめ

今回は管理画面の開発にSPAが適してることをRemix SPAモードのご紹介とReactの歴史を交えながら、ご説明させていただきました。
遅ればせながら、私もこれを機にRemix SPAモードを学んでいきます！💪
今回もこちらの記事を読んでいただき、誠にありがとうございました！