「SPA・SSR・SSG」について聞いたことはあるけど、ちゃんと理解していないなと思い、こちらの記事にまとめてみました。
SPA(Single Page Application)
概要
シングルページアプリケーションとは、Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。
シングルページアプリケーション(SPA)とは – IT用語辞典 e-Words
単一のページで構成された、Webアプリケーションであることから「SPA」と呼ばれている。流れとしては、以下のような感じ。
- クライアントから、サーバにHTTP/HTTPSリクエストを初めて送る際に、サーバからビルド済みのファイルが返ってくる
- 2回目以降は、必要なデータのみをサーバ側に要求し、差分のみ更新する
メリット
デメリット
SSR(Server Side Rendering)
概要
SPAと比べると、SSRは、初回読み込み時にサーバサイド側でレンダリングまでを行ってからHTMLファイルが返ってくる。2回目以降はSPAのように、差分のみ更新する。
メリット
デメリット
SSG(Static Site Generation)
概要
SSRでは、リクエストに応じて、サーバ側でレンダリングを行っていたが、SSGでは、ビルド時に事前にHTMLファイルの生成を行う。
例えばブログを運営していて、そのコンテンツを更新したタイミングで、HTMLファイルを生成する。(リクエストの度にHTMLファイルを生成する訳ではない)
メリット
デメリット
SPA・SSR・SSG の違いを整理してみる|まとめ
ここまで、SPA・SSR・SSG について、説明してきました。どれが良くてどれが悪いというのは正直ないと思います。
あくまで、何を優先したいか・何に適しているかによって、使い分ける必要があるかと。私の場合は以下のように使い分けます。
- SPA
- 初期表示の時間やSEOをそこまで気にしない場合
- SSR
- SEOを重視していて、規模が大きい場合
- SSG
- SEOを重視していて、更新頻度が少ない場合
その他のパターンやパフォーマンス詳細については、以下のサイトに詳しく載っているので、気になる方は見てみてください!
コメント