MPA時代（〜2010年代前半）
  サーバー → HTML生成 → ブラウザ（フルリロード）

SPA時代（2013〜）
  サーバー → JSバンドル → ブラウザ（クライアントでDOM構築）
  問題：初期表示が遅い / 白い画面 / スピナー / ネットワーク往復が2回

ハイブリッド時代（現在）
  サーバー側でHTMLを生成しつつ、クライアント側でインタラクティブに動かす
  → SSR / SSG / ISR / Server Components

React 単体でSPAを作る場合に自前で用意するもの：

React
  ├── ルーティング        → React Router / TanStack Router
  ├── データフェッチ      → TanStack Query / SWR
  ├── SSR対応            → フレームワーク
  ├── バンドル・最適化    → Vite / Webpack
  └── 画像最適化・環境変数管理 → 自前

Next.js の進化：

v1〜v12（Pages Router時代）
  pages/ ディレクトリ = 1ファイル1ページコンポーネント
  getServerSideProps → SSR
  getStaticProps    → SSG / ISR
  API Routes        → サーバー処理

v13〜（App Router時代）
  app/ ディレクトリ = フォルダ構造でルーティング
  Server Components → デフォルトでサーバーで実行
  Client Components → "use client" で明示
  Server Actions    → "use server" でサーバー処理を関数単位で定義
  → getServerSideProps などの特殊関数が不要に

従来（SPA + APIサーバー）：
  ブラウザ → CDN（空HTML + JS）→ APIサーバー（JSON）→ ブラウザ（DOM構築）

App Router時代：
  ブラウザ → Next.jsサーバー（完成HTML）→ ブラウザ（即表示）
  操作後  → Server Action → Next.jsサーバー（DB更新 + 差分HTML）→ ブラウザ

① フロントエンドのビルド（全戦略共通）
   JSX / TypeScript → JS バンドル への変換・最適化
   → CSR も SSR も SSG も全部やる（next build で実行）

② SSG/ISR 固有の「HTMLの事前生成」
   ビルド時に実際にページをレンダリングして
   .html ファイルとして出力しておく

HTMLを事前生成できる？（全ユーザー共通・初回表示）
  └── Yes → SSG / ISR
  └── No
        ├── ユーザー操作・状態管理のみ → CSR
        └── サーバーデータが必要      → SSR / Server Action

CSR：
  ネットワーク往復①：空HTML + JSダウンロード
  ネットワーク往復②：APIフェッチ
  体験：白い画面 → スピナー → データ表示

SSR：
  ネットワーク往復①：完成HTMLダウンロード（サーバー処理時間含む）
  体験：白い画面（HTML返却待ち）→ 完成HTML即表示 → スピナーなし

① next build → 空のHTML + JSバンドルを生成
② S3 / CDN に配置（Node.jsサーバー不要）
③ ブラウザ → 空のHTML受け取り → JS実行 → DOM構築

【ビルド時】
  next build → JSバンドル生成のみ（DBアクセスなし）

【リクエスト時・毎回】
  ① ブラウザ → サーバーにリクエスト
  ② サーバー → DBアクセス・データ取得
  ③ サーバー → データを埋め込んだHTML生成
  ④ サーバー → HTMLをブラウザに返す
  ⑤ ブラウザ → HTML即表示
  ⑥ Hydration → インタラクティブに動く

// app/actions/order.ts
"use server"
export async function submitOrder(data: OrderData) {
  await db.orders.create(data)   // DB更新
  revalidatePath('/orders')      // Server Componentを再実行
}

export default function Page() {
  return (
    <>
      <Header />                        {/* 即表示 */}
      <Suspense fallback={<Spinner />}>
        <SlowDataComponent />           {/* データ完了後に表示 */}
      </Suspense>
      <Footer />                        {/* 即表示 */}
    </>
  )
}

【ビルド時】
  ① DBアクセス → データ取得
  ② データを埋め込んだHTMLを生成・出力
  ③ CDN / S3 に配置

【リクエスト時】
  ④ ブラウザ → CDNにリクエスト
  ⑤ CDN → 生成済みHTMLをそのまま返す（サーバー処理なし）
  ⑥ Hydration → インタラクティブに

// App Router の SSG実装
// app/blog/[slug]/page.tsx

export async function generateStaticParams() {
  const posts = await db.getAllPosts() // ビルド時に全slugを取得
  return posts.map(p => ({ slug: p.slug }))
}

export default async function BlogPost({ params }) {
  const post = await db.getPost(params.slug) // ビルド時に実行
  return <Article post={post} />
}

【ビルド時】SSGと同じ
  DBアクセス → HTML生成 → CDNに配置

【リクエスト時・revalidate: 60の場合】
  アクセス①（0秒）   → 生成済みHTMLを返す
  アクセス②（30秒後） → 生成済みHTMLを返す（まだ有効）
  アクセス③（61秒後） → 古いHTMLを返す + バックグラウンドで再生成
  アクセス④（62秒後） → 新しいHTMLを返す

// app/api/revalidate/route.ts
export async function POST(request: Request) {
  const { path } = await request.json()
  revalidatePath(path)   // 該当ページを即再生成
  return Response.json({ revalidated: true })
}

// ISRの実装（revalidateを追加するだけでSSG→ISRになる）
// app/products/page.tsx
export const revalidate = 60  // 60秒ごとに再生成

export default async function ProductsPage() {
  const products = await db.getProducts()
  return <ProductList products={products} />
}

HTMLを事前生成できる？（初回表示・全ユーザー共通）
  └── Yes
        ├── 更新が必要？
        │     ├── No                     → SSG
        │     └── Yes
        │           ├── 時間/イベントトリガー → ISR
        │           └── リアルタイム          → SSR
        └── No（ユーザー操作・状態管理が必要）
              ├── サーバーデータが必要？
              │     ├── Yes → Server Action（差分HTML取得）
              │     └── No  → CSR（useState / useEffect のみ）

app/
  layout.tsx          ← 全体レイアウト（Server Component）
  page.tsx            ← / トップページ
  blog/
    page.tsx          ← /blog
    [slug]/
      page.tsx        ← /blog/123（動的ルーティング）
  api/
    revalidate/
      route.ts        ← on-demand ISR用エンドポイント
  actions/
    cart.ts           ← Server Actions（"use server"）

components/
  ProductList.tsx     ← Server Component（デフォルト）
  AddToCartButton.tsx ← Client Component（"use client"あり）

Page（Server Component）← 親・ほぼすべてのページ
  ├── Header（Server Component）
  ├── ProductList（Server Component）← DBアクセス
  │     └── ProductCard（Server Component）
  │           └── AddToCartButton（Client Component）← 末端のみ
  └── Footer（Server Component）

importの方向：
  ✅ Server Component → Client Component をimport（OK）
  ❌ Client Component → Server Component をimport（エラー）

"use client" は境界線：
  → つけたコンポーネント以下はすべてClient Componentになる
  → 末端コンポーネントのみに限定する

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await db.getAllPosts() // ビルド時に全slugを取得
  return posts.map(p => ({ slug: p.slug }))
}

export default async function BlogPost({ params }) {
  const post = await db.getPost(params.slug) // ビルド時に実行
  return <Article post={post} />
}

// app/products/page.tsx
export const revalidate = 60  // これだけでSSG→ISRになる

export default async function ProductsPage() {
  const products = await db.getProducts()
  return <ProductList products={products} />
}

// on-demand ISR（CMSのWebhookから呼ぶ）
// app/api/revalidate/route.ts
export async function POST(request: Request) {
  const { path } = await request.json()
  revalidatePath(path)
  return Response.json({ revalidated: true })
}

// app/orders/page.tsx
export const dynamic = 'force-dynamic'  // キャッシュなし・毎回サーバーでレンダリング

export default async function OrdersPage() {
  const orders = await db.getOrders()  // リクエストのたびに実行
  return <OrderList orders={orders} />
}

// Server Action
// app/actions/cart.ts
"use server"
export async function addToCart(productId: string) {
  const session = await getSession()
  if (!session) throw new Error('Unauthorized')  // 認証チェック必須
  await db.cart.add(productId)
  revalidatePath('/cart')  // 忘れると画面が更新されない
}

// Server Component（親）
// app/products/[id]/page.tsx
export default async function ProductPage({ params }) {
  const product = await db.getProduct(params.id)
  return (
    <>
      <h1>{product.name}</h1>
      <p>{product.price}円</p>
      <AddToCartButton productId={params.id} />  {/* Client Component */}
    </>
  )
}

// Client Component（子・末端のみ）
// components/AddToCartButton.tsx
"use client"
import { addToCart } from '@/app/actions/cart'

export default function AddToCartButton({ productId }) {
  const [added, setAdded] = useState(false)
  return (
    <button onClick={async () => {
      await addToCart(productId)  // 内部的にはHTTPリクエスト（開発者が意識不要）
      setAdded(true)
    }}>
      {added ? '追加済み' : 'カートに追加'}
    </button>
  )
}

// app/page.tsx
export default function Page() {
  return (
    <>
      <Header />                        {/* 即表示 */}
      <Suspense fallback={<Spinner />}>
        <SlowDataComponent />           {/* データ完了後に表示 */}
      </Suspense>
      <Footer />                        {/* 即表示 */}
    </>
  )
}

// components/SlowDataComponent.tsx（Server Component）
export default async function SlowDataComponent() {
  const data = await db.getSlowData()  // 重いDBクエリ
  return <DataView data={data} />
}

メリット：
  ✅ Next.jsの全機能がそのまま動く（ISR・画像最適化・Edge Functions）
  ✅ デプロイがgit pushだけで完結
  ✅ CDNが自動で設定される
  ✅ プレビュー環境が自動生成される
  ✅ on-demand ISRのキャッシュ管理が自動

デメリット：
  ❌ 社内規定でAWS/GCP/Azure以外禁止の場合使えない
  ❌ データをVercelインフラに乗せられない（金融・医療・官公庁）
  ❌ トラフィックが大きいと割高
  ❌ boto3・SageMakerなどAWSエコシステムと密結合できない
  ❌ ベンダーロックインリスク

AWS ECS / EC2 / Cloud Runでの自己ホスト：

✅ 動く：
  SSR・SSG・ISR（Node.jsサーバーがあれば動く）
  Server Actions
  画像最適化（sharpを自前インストール）
  Route Handler

❌ 制限あり：
  Edge Functions → Vercel固有・自己ホストでは動かない
  ISRのキャッシュ管理 → 自前で設定が必要
  CDN → CloudFrontなど別途設定が必要

Next.js on Vercel：
  個人・スタートアップ・中規模SaaS
  → デプロイ・運用コストを最小化したい場合

Next.js on AWS ECS：
  企業・規制業種・大規模サービス
  → AWS規制がある・ロックインを避けたい場合

Next.js + Django on AWS ECS：
  → boto3・ML処理が必要
  → モバイルアプリ向けAPIも必要
  → 既存Django資産がある

パターン別の現実解：

  A（新規・Webのみ）：
    Next.js on Vercel → Supabase
    → 最もシンプル・運用コスト最小

  B（既存資産活用）：
    Next.js on ECS → Django on ECS → RDS
    → 既存Django APIをそのまま活用

  C（ハイブリッド）：
    Next.js on Vercel → Supabase（通常CRUD）
                      → Django on ECS（ML・boto3のみ）

// ❌ よくある誤り①：ClientからServerをimport
"use client"
import ServerComponent from '@/components/ServerComponent'  // エラー

// ❌ よくある誤り②：Server ComponentでブラウザAPIを使う
export default async function Page() {
  console.log(window.location)  // サーバーにwindowはない
}

// ❌ よくある誤り③："use client"を上位に書きすぎる
// → 子コンポーネントがすべてClient Componentになる
// → "use client"は末端コンポーネントのみに限定する

よくある罠：
  ❌ データを更新したのに画面に反映されない
  → revalidatePath / revalidateTag の呼び忘れ

  ❌ 開発環境では動くが本番で古いデータが出る
  → 開発環境はキャッシュが効かない設定になっている

  ❌ ISRで再生成したはずなのに古いHTMLが返る
  → CDN（CloudFront）のキャッシュが残っている
  → Next.jsのキャッシュとCDNのキャッシュは別物

基本の対処法：まず revalidatePath を疑う

// ページ数が多い場合：人気ページのみビルド時に生成
export async function generateStaticParams() {
  const posts = await db.getPopularPosts()  // 人気記事のみ
  return posts.map(p => ({ slug: p.slug }))
}

export const dynamicParams = true  // それ以外はリクエスト時に生成

❌ ISRのキャッシュが複数インスタンスで共有されない
   ECSで複数タスク起動時、インスタンスAで再生成してもBは古いまま
   → 対策：Redis・S3でキャッシュを共有する

❌ 画像最適化が動かない
   → npm install sharp が必要

❌ Edge Functionsのコードをそのまま移植しようとする
   → Vercel固有・Route Handlerに書き直す

// ❌ 認証チェックなしで使うのは危険
// "use server" の関数は外部から直接呼べる

// ✅ 必ず認証チェックを入れる
"use server"
export async function deletePost(postId: string) {
  const session = await getSession()
  if (!session) throw new Error('Unauthorized')
  await db.posts.delete(postId)
}