2023.7.17
【WEB開発入門vol.7】SPA(シングルページアプリケーション)とは？
今回はSPAについて解説していきたいと思いま。
1.SPAとは
SPAとは、single page applicationの略で、一言で表現すると、1枚のWEBページで実行するアプリケーションを指します。
通常、WEBアプリケーションを実現するには、ページ遷移する(画面を切り替える)際、サーバーへのリソースの問い合わせリクエストを送り、サーバーからのレスポンスを待つサーバーサイドレンダリング(SSR)が行われます。その際にサーバーサイドプログラムが動作して、レスポンスとしてHTMLを送り、送られてきたHTMLデータをブラウザ上に表示することでページを切り替えたり、機能が動作したりします。
しかし、SPAの場合、クライアント側で動作するJavaScriptによってページ遷移を制御します。
2.SPAのメリット
ページ遷移の際のSSRを行わないことの何がいいのでしょうか。
まず、ページ遷移の際のサーバーとの通信をなくすことができるため、動作が速くなります。例えば膨大な量のデータを読み込む場合、サーバーサイドでデータを処理してから届くまでクライアントは待つことになります。
それをページ遷移の際ではなく何らかの別のイベントの際に読み込む、もしくは一気に読み込むのではなく少しずつ読み込むことによってページ遷移の際の動作が速くなります。
また、画面表示を全てJavaScriptで制御するため、通常では表現が難しいUIを表現することが可能です。
3.SPAのデメリット
デメリットとしては、初回の読み込みが長くなることとSEOに弱くなることです。
ページ遷移に必要なプログラムを初回で全て読み込むため、初回の読み込みが長くなります。また、検索エンジンによってはJavaScriptに対応していないクローラーなどがあり、SEOに弱くなる場合があります。またJavaScriptがユーザー設定でオフになっているとページそのものの閲覧ができなくなります。
4.開発技法
クライアント側の開発は、ReactやVueといったモダンフロントエンドフレームワークを使用するのが一般的な開発技法になります。
また、ページ遷移の度にSSRを行わないため、サーバーとの通信は、初回のページ読み込み時と、イベント発生時にサーバーと通信を行います。
初回のページ読み込み時にページ遷移を制御するプログラムなどのクライアントサイドのプログラムやHTMLなどを読み込みます。イベント発生時の通信の際は、APIサーバーを構築し、APIと通信することでデータ取得などを行います。
