SSRとSSGの理解を深める

Next.js の勉強をしているのですが、SSR と SSG を説明できるのか、適切に使い分けられるのかと考えたとき、よくわかってないと感じたので、今回 SSR と SSG について調べました。

SSR

まず、SSR は、Server Side Rendering の略です。
名称の通り、サーバー側でHTMLを生成し、クライアントサイドに返してブラウザに表示します。
生成するタイミングは、クライアントサイドから呼ばれた時です。クライアントサイドでリクエストした際に、サーバーサイドでHTMLを生成し、クライアントサイドに返します。

SSG

SSG は、Static Site Rendering の略です。
ビルドした際に、すべてのページHTMLを生成します。そして、クライアントサイドからリクエストがあった際に、ビルド時に生成して保管しておいたHTMLをクライアントサイドに返し表示します。

SSRとSSGの違い

上記の説明それぞれにも説明していますが、SSR と SSG 、この2つの違いは、HTMLを生成するタイミングが違います。SSR は、クライアントサイドからリクエストがあるたびにHTMLを生成し、クライアントサイドに返します。SSG は、ビルド時にサーバーサイドでHTMLを生成し、クライアントサイドからレスポンスがあった際に、生成しておいたHTMLを返します。
SSR は、動的なHTML、SSG は、静的なHTMLを生成するということです。

SSR: 動的なHTML

クライアントサイドがリクエストするたびにサーバーサイドでHTMLを生成するため、下記の特徴があります。

リクエストした時に、HTMLを生成するので、常に最新の情報を得ることができる
動的な最新の情報に基づいて、一意なコンテンツを作成できる
ブラウザでの仕事量が少ないため、CSR よりページの表示速度が速い
ブラウザでの仕事量が少ないため、ユーザーのデバイスのメモリや通信環境による影響が少ない
リクエストするたびにHTMLを生成するため、ページ遷移のたびにサーバーの通信が発生する

SSG: 静的なHTML

ビルド時にいっきに全ページのHTMLを生成します。よって下記の特徴があります。

ビルド時にHTMLを生成しているので、リクエスト後のブラウザの表示が SSR より速い
あらかじめビルド時に読み込んでいるため、クローラーが読み取ることができ、SEOに強い
ページを更新したい場合、手動で再ビルドし直す必要がある

SSRとSSGの選択

SSR: 上記から、更新が頻繁に起こる常に最新の情報を得たいページの場合
→ 商品ページ、タイムラインページ
SSG: 更新頻度が少ない静的なページの場合
→ ヘルプページ、会社紹介ページ、問い合わせページ

まとめ

今回は、SSR と SSG の特徴や違い、使い分けについて調べました。
SSR は動的なページ、SSG は静的なページに使用するとこが分かりました。
他にも CSR などもあるため、機会があったら調べて、実際に書いてみたいと思います。

参考：AWS - SSG とSSR の比較

ご覧いただきありがとうございました

今後もフロントエンド開発で気になったことや分からないことを調べて、共有していきたいと思います。
間違いなどございましたら、教えていただきたいです。