SPAのメリットとデメリット

◆SPAとは

SPAとは「Single Page Application」の略で、単一ページでコンテンツの切り替えを行っているWebアプリケーションのアーキテクチャの名称です。

・SPAのメリット

1.  高速なページ遷移が実現できる

従来のWebページでは、ページ遷移の度に遷移先のHTML全体をサーバーから取得するため読み込みに時間がかかりますが、SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。また、ブラウザによるページ遷移が発生しないため、独自にキャッシュ機能や先行ローディングの機能を実装することでさらなる速度向上を図ることも可能です。

2.  ネイティブアプリの代りにもなる

SPA によって実現可能なユーザー体験はネイティブアプリと比べても遜色のないものとなるので、Web アプリとして作成したものをネイティブアプリとして流用することができます。 オフラインでのページ閲覧、プッシュ通知、ホーム画面からの起動といったネイティブアプリならではの機能をWebアプリで実現することができます。

・SPAのデメリット

１. 実装コストが高い

SPAでは今までブラウザに処理を任せていた部分を実装する必要があるため、開発コストが高いです。例えば、ブラウザの「戻る・進む」の履歴管理、ページごとの URL の割り当て、リンククリック時のローディング表示などが挙げられます。一般的な機能であれば、それがすでに実装されたライブラリがある場合が多いですが、アプリの要件に合わせるために独自に実装しなければならないこともあります。

2. 初期ローディングに時間がかかる

ページの切り替えは高速になりますが、JavaScriptのコード量が増えるのに加えて今までサーバー側で行っていたHTMLの生成をブラウザで行うことになるため、 初期ローディングに時間がかかってしまいます。。