弱点補強: Next.js App Router × React Server Components — ページ全体"use client"+useEffectでSSR放棄→async Server Component化 × fetch常時no-store→revalidate+tagsでキャッシュ戦略化 × location.reloadでフルリロード→Server Action+revalidatePath/revalidateTagで部分再検証 × 重量チャートライブラリ込みでページ全体"use client"→インタラクティブな葉だけを分離 × Server Action引数未検証→zod safeParseでサーバー側バリデーション × N+1ウォーターフォール→集約済みエンドポイント一本化 × 遅い集計API完了待ちで一覧まで巻き添え遅延→Suspenseでストリーミング（MOps キャンペーン管理画面 Next.js 15/React 19 App Router Bad→Good 7点）

問題は3層に分類できる。(1) レンダリング戦略の誤り — App Router では "use client" を明示しない限りコンポーネントはデフォルトで Server Component であり、サーバー側でデータ取得とHTML生成まで済ませてからクライアントへ送るのが基本形。今回のコードは冒頭で "use client" を宣言してしまっているため、この恩恵（SSR・ゼロJSでの初期表示・サーバー側での安全なデータ取得）を自ら放棄している。(2) データ取得の並列性とキャッシュ戦略の欠如 — N+1のウォーターフォールfetchと、全APIをno-storeで毎回叩く設計は別の問題であり、「並列化すべきもの」と「キャッシュしてよいもの/都度最新にすべきもの」を区別できていない。(3) 信頼境界の欠如 — Server Action・API Routeであっても、クライアントから送られてくる値は外部入力であり、DB/BigQueryへの書き込み前にサーバー側で必ず検証が必要。

「このコンポーネントは本当にインタラクティブ（クリック・入力・状態を持つ）か？」を1つずつ問い、Yesの部分だけを小さく"use client"に切り出すのがApp Routerの基本設計思想であることを意識する。

• 問題①②: ページ全体"use client"+useEffectでのfetch → ページを async Server Component にし、fetch() をトップレベルで直接 await する（Server Component内のfetchはNext.jsのデータキャッシュ層と統合される）
• 問題③: location.reload() によるフルリロード → Server Action でステータス変更を実行し、成功後に revalidatePath("/admin/campaigns")（またはrevalidateTag）でそのルートのキャッシュだけを再検証する
• 問題④: 重いチャートライブラリを含むページ全体が"use client" → チャートを表示する部分だけを独立した async Server Component に切り出し、ボタン等の本当にインタラクティブな部分だけを小さな"use client"コンポーネントにする
• 問題⑤: サーバー側バリデーションなし → Server Action内で zod の safeParse() を通してから初めてバックエンドAPIを呼ぶ
• 問題⑥: キャンペーンごとの個別fetch(N+1) → バックエンドが返す集約済みエンドポイント/api/campaignsをそのまま使う（クライアント側でのループfetchを丸ごと削除する）
• 問題⑦: 一番遅い集計APIの完了を全体で待つ → 一覧部分と集計サマリー部分を別々の async Server Component に分離し、サマリー部分だけを <Suspense fallback={...}> で包んでストリーミングする

// app/admin/campaigns/page.tsx （Server Component, asyncでOK）
import { Suspense } from "react";
import { CampaignSummary } from "./campaign-summary";
import { StatusToggleButton } from "./status-toggle-button"; // "use client"はここだけ

async function getCampaigns() {
  const res = await fetch(`${process.env.API_BASE_URL}/api/campaigns`, {
    next: { revalidate: 30, tags: ["campaigns"] }, // キャッシュ + タグ付け
  });
  return res.json();
}

export default async function CampaignsPage() {
  const campaigns = await getCampaigns(); // サーバー側で直接await

  return (
    <div>
      <h1>キャンペーン一覧</h1>
      <Suspense fallback={<p>集計データを読込中...</p>}>
        <CampaignSummary /> {/* 遅いAPIはここに隔離、一覧の表示をブロックしない */}
      </Suspense>
      <ul>
        {campaigns.map((c) => (
          <li key={c.id}>
            {c.name} - クーポン発行数: {c.couponCount}
            <StatusToggleButton campaignId={c.id} currentStatus={c.status} />
          </li>
        ))}
      </ul>
    </div>
  );
}

// app/admin/campaigns/actions.ts
"use server";
import { z } from "zod";
import { revalidatePath } from "next/cache";

const StatusSchema = z.object({
  campaignId: z.string().uuid(),
  status: z.enum(["active", "paused"]),
});

export async function updateCampaignStatus(input: unknown) {
  const parsed = StatusSchema.safeParse(input); // サーバー側で必ず検証
  if (!parsed.success) return { ok: false, error: "不正な入力です" };
  // バックエンドAPIへ反映...
  revalidatePath("/admin/campaigns"); // フルリロード不要
  return { ok: true };
}