「SPA・SSR・SSG」について聞いたことはあるけど、ちゃんと理解していないなと思い、こちらの記事にまとめてみました。
SPA(Single Page Application)

概要
シングルページアプリケーションとは、Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。
シングルページアプリケーション(SPA)とは – IT用語辞典 e-Words
単一のページで構成された、Webアプリケーションであることから「SPA」と呼ばれている。流れとしては、以下のような感じ。
- クライアントから、サーバにHTTP/HTTPSリクエストを初めて送る際に、サーバからビルド済みのファイルが返ってくる
- 2回目以降は、必要なデータのみをサーバ側に要求し、差分のみ更新する
メリット
SPAのメリット
- MPA(Multi Page Application)と比べると、ページ遷移の時などに毎回ページごと読み込む必要がないので、ページ遷移が高速
- データ通信コストが低い
デメリット
SPAのデメリット
- 初回読み込みに時間がかかる
- 初回読み込み時は、ほとんど何もないHTMLファイルなので、SEOに弱い可能性がある
SSR(Server Side Rendering)

概要
SPAと比べると、SSRは、初回読み込み時にサーバサイド側でレンダリングまでを行ってからHTMLファイルが返ってくる。2回目以降はSPAのように、差分のみ更新する。
メリット
SSRのメリット
- サーバ側でレンダリングしてからクライアントに返すので、SPAと比べると初回読み込みが早い(ユーザー環境に依存しない)
- SPAと比べるとSEO面で強い可能性がある
デメリット
SSRのデメリット
- SPAと比べて、サーバ側に負荷がかかる
SSG(Static Site Generation)

概要
SSRでは、リクエストに応じて、サーバ側でレンダリングを行っていたが、SSGでは、ビルド時に事前にHTMLファイルの生成を行う。
例えばブログを運営していて、そのコンテンツを更新したタイミングで、HTMLファイルを生成する。(リクエストの度にHTMLファイルを生成する訳ではない)
メリット
SSGのメリット
- SPA と比べると SEO 面で強い可能性がある
- SSR と比べるとレスポンスが早い
- 更新頻度の少ないサイト・サービスに向いている(1日1回ほどしか更新しないようなブログ等)
デメリット
SSGのデメリット
- データの更新毎にビルドを行うので、更新頻度が高い・ページ量が多いサイト・サービスに不向き(ツイッターやチャットアプリ等)
SPA・SSR・SSG の違いを整理してみる|まとめ
ここまで、SPA・SSR・SSG について、説明してきました。どれが良くてどれが悪いというのは正直ないと思います。
あくまで、何を優先したいか・何に適しているかによって、使い分ける必要があるかと。私の場合は以下のように使い分けます。
- SPA
- 初期表示の時間やSEOをそこまで気にしない場合
- SSR
- SEOを重視していて、規模が大きい場合
- SSG
- SEOを重視していて、更新頻度が少ない場合
その他のパターンやパフォーマンス詳細については、以下のサイトに詳しく載っているので、気になる方は見てみてください!
コメント