「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を重視していて、更新頻度が少ない場合
その他のパターンやパフォーマンス詳細については、以下のサイトに詳しく載っているので、気になる方は見てみてください！
コメント