CSR, SSR, SSGとは何か・違いをよく忘れるのでメモ

普段バックエンドの開発を行っていると、SSRとかの用語やメリデメを都度都度グクって調べて、中途半端な理解で進みがちなので、備忘録として、それぞれの違いを違いをメモとして残す

その名の通り、Webページを表示するクライアント(= ブラウザ)でHTMLやCSSを描画をする手法

サーバーにアクセスすると返ってくるHTMLは空っぽで、JSやCSSなど関連ファイルをダウンロード後、JSによる描画を行う

特徴として初回アクセスはクライアント画面で描画を行うので、重くなりがちだが初回アクセス後のページ遷移は高速に行うことが可能

固定HTMLを扱って、色々なページを表示可能なので、SPA(Single Page Application) とも呼ばれる

クライアント側で描画するのとは対象的に、サーバー側でHTMLやCSSを描画する手法

サーバーにアクセスすると、アクセスしたエンドポイントなどのリクエスト情報に応じてHTMLやCSSを構築してブラウザへ返す

変数をHTMLに埋め込むテンプレートエンジンによる描画と似ていて、以下のような特徴を持つ

GoogleなどのクローラーはCSRだとしてもインデックスされるが、レンダリングの待ち行列に追加されたり、読み込み速度が遅くなり表示順位が下がるなどの懸念もあり、SSRにしておく方が無難

CSRではダウンロードファイルサイズが大きくなったりJSによるDOM構築にも時間がかかるので、SSRでは描画が高速になる

また、ユーザーの通信速度等のネットワーク環境やデバイスのスペックの影響を受けにくいので、安定的にコンテンツを提供することも可能

実行結果をCDNでキャッシュすることで、より高速化が可能

ただし、個人情報を含む内容をキャッシュすると個人情報漏洩に関するリスクもあるので、用途に応じて使い分ける必要あり

SSRのリクエスト単位ごとの描画とは異なり、SSGではビルドにHTMLが構築される

これによってSSRよりさらに高速

ただコンテンツの更新時にビルドが必要なので、ページが多い大規模アプリケーションにはビルド時間が肥大化するので、不向きな部分もあり

まとめ

CSR, SSR, SSGについての説明とメリット・デメリットについてまとめました

具体的なユースケースや必要な要件に応じて使い分けられるようになりたい