これまでのWebとSPAの違い

これまでのWebサイトやWebアプリケーションとの違いとしては、SPAはHTMLが1つしかなく、JavaScriptで画面の要素を変更して、通信や画面の書き換えなどの動作を実現している点です。

これまでのWeb

1. ユーザーがリンクをクリックする
2. ブラウザがURLをリクエストする
3. Webサーバーからページ全体のデータが送られてくる
4. ブラウザがページを表示する
5. ユーザーがリンクをクリックする
6. Webサーバーからページ全体のデータが送られてくる
7. ブラウザが違うページを表示し直す

といった流れでページにアクセスしていました。
そのため、リンクをクリックした後に、次の画面が表示されるまで待たされることがしばしばありました。

SPAのWebアプリケーション

1. ユーザーがリンクをクリックする
2. ブラウザがURLをリクエストする
3. Webサーバーからページ全体のデータが送られてくる
4. ブラウザがページを表示する
5. ユーザーがリンクをクリックする
6. Webサーバーからページの差分データが送られてくる
7. ブラウザが現在のページを部分的に書き換える

現在のページと、次のページの差分データのみを更新するので、通信も画面描画も高速に実現される仕組みになっています。

SPAのメリット

高速な動作が実現できる

特に通常のWebサイトと違い、Webアプリケーションの場合はUIに対するレスポンスの速さでユーザー体験がずいぶんと違って感じますので重要です。

チームで開発しやすくなる

上の例で出てきた差分、つまりUIコンポーネントごとに別々に開発できるので、チームで分担して開発しやすくなります。

変更・修正がやりやすくなる

デザインや挙動を変更する場合も、全体を修正する必要がなく、UIコンポーネントを修正すれば良いので開発やサービス運用がやりやすくなります。