Next.jsで学ぶSSG（Static Site Generation）ってなに？

Web制作を学び始めたばかりの私は、Next.jsに出会って「SSR」「SSG」「ISR」というカタカナ用語の嵐に圧倒されました。
今回はその中から SSG（静的サイト生成） について、初心者目線でサクッとまとめてみます。

SSGってどんなもの？

SSGは「ページをあらかじめ作っておく」仕組みです。
ユーザーがアクセスしたときには、もう出来上がったページをそのまま返すだけなので、めちゃくちゃ速い。

イメージとしてはこんな感じ↓

• SSR → 注文を受けてからその場で料理を作るレストラン
• SSG → すでに作り置きしてある料理をすぐに出す食堂

要は「スピード重視」で、シンプルなサイトやブログに向いているやり方です。

実際にやってみた感想

Next.jsでSSGを使うときは、getStaticProps という機能を使います。

export async function getStaticProps() {
  return {
    props: { message: "これはビルド時に生成されたページです！" },
  }
}

これだけで「サイトをビルドした時点で固定されたページ」が完成。
ページを開いた瞬間にサクッと表示されるのを見て、「おお、速い！」とちょっと感動しました。

SSGが得意なところ・苦手なところ

得意なところ

• 表示が速い
• サーバーの負担が少ない
• SEOにも強い

苦手なところ

• 更新のたびに再ビルドが必要
• リアルタイムで変わるデータには向いていない

まとめ

初心者の私が感じたのは、

• ポートフォリオやブログ → SSGがピッタリ
• リアルタイム性が必要なチャットやダッシュボード → 別の方法が良い

ということです。

Next.jsはいろんな仕組みがありますが、まずはSSGから触ってみると「仕組みが分かりやすくて楽しい」と思いました。