つい先日までアサインしていた案件で触れる機会があったので調べてみました。

SPAとはSingle Page Application（シングルページアプリケーション）の略なのですが、
簡単にいうと、1ページでコンテンツの切り替えを行う仕組みの事です。

SPAを使うメリットは？

通常ならページ遷移の度に遷移先のHTML全体をサーバーから読み込み必要がある為、
何かしらページ遷移のアクションを起こした時にはページを読み込むための時間がかかります。
（必要な部分がそのページの一部分であるのにheaderとか余計な部分も読み込まれているのでその時間がかかるんです。。。）

でもSPAは切り替えたい必要最小限のデータで良いので通常よりも早く表示される、と言うわけです。

今回はindexから動画ページへ遷移するボタンが幾つかあり、
そのボタンをクリックすると各々のページへ遷移し動画が再生される、
と言う案件だったのでSPAを使う運びになったわけですね。

SPAを使うデメリットってある？

最初のアクセス時に読み込み時間がかかる為、直帰率の高いサイトには適さないようです。

今回は動画を見る事が目的でしたので理にかなっていたわけです。

まとめ

SPAは一部のみ読み込んでくれるのでブラウザの挙動にとらわれることなくUIの実装でき、
表現できる事が増えるなぁと思いました。

そしてこれはSPAに限らず、この案件にはこれを使えばってのもですが、
知らなければ選択肢にもならないわけで。。。日々精進です。