Next.js の 4つのレンダリング方式
1. SSG（Static Site Generation）
静的サイト生成：ビルド時にHTMLを作って保存しておく方式
🛠️ ビルド時にページを作成 → 📦 HTMLファイルとして保存 → 🌍 リクエスト時はそれを配信
特徴： ページはあらかじめ生成済み → 爆速表示
使いどころ： 内容があまり変わらないページ（ブログ、企業サイト、商品一覧など）
関数： getStaticProps
✅ メリット：
表示が超早い（CDNキャッシュOK）
サーバー負荷が少ない
⚠️ デメリット：
更新内容を反映するには再ビルドが必要（※ISRで解決できる）
2. ISR（Incremental Static Regeneration）
静的再生成：SSGの欠点をカバー！必要に応じて再生成する方式
📦 HTMLを保存 → ⏰ 設定した時間ごとにバックグラウンドで自動更新
特徴： 静的な速さを保ちつつ、一定時間ごとにデータを自動更新
使いどころ： 頻繁に変わるけど高速表示したいページ（ニュース記事、ランキングなど）
関数： getStaticProps + revalidate
✅ メリット：
SSGの速さ + SSRの新しさ → 両方の良いとこ取り！
3. SSR（Server Side Rendering）
サーバー側レンダリング：アクセスのたびにサーバーでHTMLを生成
👤 ユーザーがアクセス → 🌐 サーバーでHTML生成 → 📄 表示
特徴： 常に最新データが取得できる
使いどころ： ユーザーによって内容が変わるページ（マイページ、ダッシュボードなど）
関数： getServerSideProps
✅ メリット：
毎回最新のデータを表示できる
⚠️ デメリット：
毎回サーバー処理が発生 → SSGより遅い・負荷がかかる
4. CSR（Client Side Rendering）
クライアント側レンダリング：HTMLは空っぽ、ブラウザ側でJSが実行されて描画
📄 最初はHTMLスケルトン → 📦 JS読み込み後にデータ取得 → 🖼️ 描画
特徴： フロント側でのみ描画、React単体でもこの方式
使いどころ： SPA（シングルページアプリケーション）や動的ページ（ログイン後のページなど）
✅ メリット：
表示内容の変更が自由
APIで自由にデータ取得・更新できる
⚠️ デメリット：
初期表示が遅く、SEOに弱い
✅ 各方式のまとめ表
| 方式 | 表示速度 | SEO | データの新しさ | サーバー負荷 | 使いどころ |
|---|---|---|---|---|---|
| SSG | ◎ 爆速 | ◎ 強い | ✕ 古くなりがち | ◎ 低い | ブログ・会社概要 |
| ISR | ◎ 爆速 | ◎ 強い | ◯ 自動で更新 | ◯ やや低め | ニュース・商品ページ |
| SSR | ◯ 速め | ◎ 強い | ◎ 常に最新 | △ やや高い | ユーザー別ページ |
| CSR | △ 遅め | ✕ 弱い | ◎ 常に最新 | ◎ 低い | SPA、内部ページ |
🔍 ポイント：
表示速度を重視するなら → SSG / ISR
リアルタイム性を重視するなら → SSR / CSR
SEOが重要なら → SSG / SSR / ISR（CSRは不向き）
因みに。。。
Next.js 13〜14以降では、
Pages Router構成（page/）からApp Router構成（app/）へ変わり、
ページファイル自体がasync functionとして動けるようになった。
そのため：
getStaticProps = 1つの特別な関数 → 不要になった
ページ全体が async なので、 fetch() やファイル読み込みを直接書ける
https://qiita.com/aotatsu8/items/3950c116baef4d415f6f
https://qiita.com/aotatsu8/items/0accec38f971f1209935