「SPA・SSR・SSG」の違いを整理してみる

SPA・SSR・SSG の違いを整理してみる JavaScript
記事内に広告が含まれています。

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

SPA(Single Page Application)

概要

シングルページアプリケーションとは、Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。

シングルページアプリケーション(SPA)とは – IT用語辞典 e-Words

単一のページで構成された、Webアプリケーションであることから「SPA」と呼ばれている。流れとしては、以下のような感じ。

  1. クライアントから、サーバにHTTP/HTTPSリクエストを初めて送る際に、サーバからビルド済みのファイルが返ってくる
  2. 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を重視していて、更新頻度が少ない場合

その他のパターンやパフォーマンス詳細については、以下のサイトに詳しく載っているので、気になる方は見てみてください!

patterns|Introduction

コメント

タイトルとURLをコピーしました