Arsaga Partners, Inc.

SPA

読み方:えすぴーえー

  

SPAとは

SPAとは、Single Page Applicationの略。単一のページでコンテンツの切り替えを行うWebアプリケーションの設計構造の名称です。
CSR(Client Side Rendering)とも言われます。

 

SPAの処理の流れ

1. ユーザーがリクエストする
2. リクエスト初回時、表示に必要なデータをサーバーから返してもらう

3. ブラウザ側でHTMLを生成して表示

4. リクエスト2回目以降はデータの差分だけAPIサーバーにリクエストし、返されたデータをブラウザ側で処理して表示

 

SPAのメリット

  • 通常のWeb ページでは実現できないユーザー体験(UX)を実現できる
    SPAでは、ブラウザによるページ遷移を行わずにテキストや画像などのコンテンツを更新されるため、UXを大きく向上させることができます。
    従来のWeb ページでは遷移時にコンテンツ全体が書き換わりますが、SPAではJavaScript を用いて、ページ内のHTMLの一部を差し替えてコンテンツを切り替えています。
    これにより、サービスのパフォーマンスの向上が可能になります。
  •  

  • 高速なページ遷移を実現できる
    上記の通り、SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。

 

SPAのデメリット

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

  • SEOに弱い
    クローラーはJavaScriptを正しく評価できないためSEOに弱いと言われています。

 

SPA関連の歴史

2010年頃: iPhone osでFlashをサポートしない事を発表して、代わりにSPAが注目が浴びた

 

 

関連用語

SSG
SSR
レンダリング

 

 

<執筆・監修>
アルサーガパートナーズ株式会社 DX技術用語集制作チーム フロントdivision

制作・監修

アルサーガパートナーズ
DX技術用語辞典 制作チーム

当社は、営業部隊を持たないDX開発パートナースタジオです。

お問い合わせはこちら

CONTACT

下記よりお気軽にご相談ください。

LINEでお問い合わせ

RECRUIT

採用情報

アルサーガパートナーズ株式会社は、一緒に働く仲間を募集しています。 「人間らしく生きる」「自分で考えて行動する」という文化を重視しており、「バグを否定しない」という言葉を掲げています。 挑戦をし続けることが一番の成長に繋がると信じているからです。 まずは挑戦する第一歩を踏み出してもらえれば幸いです。

RECRUIT

採用情報