SPA・・・Single Page Applicationの略
特徴
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えをおこなうアプリケーションのこと。
SPAサイトをまとめたものはこちら
https://bm.s5-style.com/category/technic/spa
従来のWebアプリは、
ユーザのアクション→それに対しサーバーに通信(リクエスト)→ユーザーでHTMLを作成し、ブラウザに返す(レスポンス)→HTMLに反映
この方式では変更のない要素(フッター、ヘッダーなど)までも読み込む必要があり、時間(コスト)がかかる。
ex)ページ遷移の時に一瞬画面が白くなる特徴。
それに対して、SPAは、
ユーザーのアクション→それに対して必要なデータのみをサーバーに要求→返ってきたデータをJSで処理→処理をHTMLに反映
このように、ブラウザでできる処理はJSで終わらせることで、サーバーとの通信量を抑え、動作の向上が図れる。また、データの取得は非同期的に実行でき、ページ遷移時に画面がチラつくことなく、快適に閲覧できる。
SPAを使うメリット
・ユーザー体験の向上
ページの表示速度がとても重要で、ECサイトでは売り上げに直結する
・コンポーネント分割が容易になることでの開発効率のアップ
各ページごとにHTMLファイルを用意するケースと違い、SPAはHTMLファイルは1つのみでJSによるDOMの書き換えで画面遷移をしている。すなわち、各要素をコンポーネントで定義している。