最終更新日：
SPAとは、最初に一つのページを読み込み、その後は必要な部分だけを書き換えて動くWebアプリケーションの作り方です。
SPAは Single Page Application の略です。ふつうのWebサイトはページを移るたびにサーバーから新しいページを受け取りますが、SPAでは、最初に画面のしくみを読み込んだ後、JavaScriptがサーバーからデータだけを受け取り、画面を書き換えます。React や Vue.js などを使って作られます。
画面の切り替えが速く、操作の途中で画面全体が読み込み直されないため、業務システムの管理画面や、操作の多いWebアプリケーションに向いています。画面とサーバー側をAPIで分けて作るため、同じAPIをスマートフォンのアプリと共有することもできます。
最初の表示に時間がかかることや、検索エンジンにページの内容が伝わりにくいことがあります。多くの人に見てもらう公開のサイトでは、SSRや静的な生成と組み合わせることを考えます。ブラウザの戻るボタンやURLの共有が正しく働くかも確かめます。
ふつうのWebサイトとSPAの違い
- ふつうのWebサイトページを移るたびに、サーバーから新しいページを受け取ります
- SPA最初に画面のしくみを読み込み、その後はデータだけを受け取って画面を書き換えます
画面の切り替えが速い一方で、最初の表示に時間がかかることや、検索エンジンに内容が伝わりにくいことがあります