でじぼうです。
Web開発を勉強していると SSG や SSR という言葉を耳にすることがあると思います。
意味の理解を深めていきましょう！
でじぼう
この記事は下記の方がおすすめ！
- SSGとSSRの違いを知りたい
- Next.jsやNuxt.jsを勉強中
- どちらを使うべきか迷っている
Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち
SSGとは？（静的サイト生成）
SSG（Static Site Generation）は、サイトを公開する前に、すべてのHTMLファイルをあらかじめ生成しておく方式です。
特徴
- 表示がとても速い（すでにできたHTMLをそのまま表示するだけ）
- サーバー負荷が少ない（サーバー処理が不要）
- 内容が更新されても、再ビルドしないと反映されない
- CMSやデータベースと組み合わせると、自動でページを量産できる
向いているケース
SSGは表示が速く、サーバー負荷が低いため、更新頻度が低いページに向いています。
- 会社紹介・サービス案内ページ
→ 内容が頻繁に変わらず、毎回の生成が不要なため。表示も高速。
- ブログ・記事ページ（更新頻度少）
→ 投稿後にビルドすればOK。SEOにも強くて軽い。
- 大規模アクセス対応が必要なLPや特集ページ
→ キャッシュのように扱えるため、大量アクセスでも安定して表示される。
（ページがあらかじめ作られていて保存されているため、見る人が増えてもすぐに表示できて、サイトが重くなりにくい）
SSRとは？（サーバーサイドレンダリング）
SSR（Server Side Rendering）は、ユーザーがページを開いたときに、サーバーがHTMLをその場で生成する方式です。
特徴
- 最新の情報をリアルタイムで表示できる
- ページ表示に少し時間がかかる（毎回サーバーで生成）
- サーバーの負荷が大きくなりがち
- 検索エンジンにも情報が見える（SEOにも強い）
向いているケース
SSRは常に最新情報を表示できるため、動的な内容やリアルタイム性が必要なページに向いています。
- 商品の在庫・価格をリアルタイム表示したい
→ 毎回サーバーで生成するため、最新の情報を常に表示できる。
- ユーザーによって異なるページ内容
→ ログインユーザー情報など、動的に内容を変える必要があるケースに強い。
SSG と SSR の違い【比較表】
下記に、SSG と SSR の違いをまとめました。
| 比較項目 | SSG（静的生成） | SSR（サーバー側生成） |
|---|---|---|
| 生成タイミング | ビルド時 | リクエスト時 |
| 表示スピード | 高速 （キャッシュのような仕組み） | やや遅い（毎回生成するため） |
| SEO対応 | ◎（静的HTMLのため強い） | ◎（サーバーでHTML生成されるため強い） |
| 内容の更新反映 | 再ビルドが必要 | 即時反映可能 |
| サーバーへの負荷 | ほぼなし | 毎回生成のため高め |
コメント