静的と動的（SSG / SSR）

なぜ学ぶか： 「このページは、いつHTMLになるのか？」— Next.jsを理解する本質的な問いです。答えは2つ＋α。飲食店の「作り置き」と「注文後調理」の関係に似ています。

まずはこの例を見てみましょう

① 静的（SSG）= 作り置き
   ビルド時に HTML を作っておき、アクセスが来たら配るだけ
   → 最速・最安。全員に同じ内容ならこれ
   例: ブログ記事、この learn アプリのトピックページ

② 動的（SSR）= 注文後調理
   アクセスが来るたびに HTML を作る
   → 人によって内容が違うページはこれ
   例: ログイン後のマイページ

③ おまけ（ISR）= 作り置き＋定期的に作り直し
   export const revalidate = 3600; と書くと1時間ごとに更新

判断基準はひとつ：「誰が見ても同じ内容か？」。同じなら作り置き（静的）が最適です。

コード例

// ===== ① 静的（SSG）=====
// 全員同じ内容 → ビルド時に作り置き（既定でこちらに最適化される）
export default function AboutPage() {
  return <h1>このサイトについて</h1>;
}

// ===== ② ISR（ページに1行足すだけ）=====
// 「3600秒ごとに作り直される静的ページ」になる
// export const revalidate = 3600;

このlearnアプリの99トピックも、ビルド時にすべて作り置き（SSG）されています。表示が速いのはそのためです。