// ❌ Pages Router — モードごとに異なる関数

// 📁 pages/blog/index.tsx (SSG)
import type { GetStaticProps } from 'next';

interface Post { id: number; title: string; }

export const getStaticProps: GetStaticProps<{ posts: Post[] }> = async () => {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return {
    props: { posts },
    revalidate: 60, // ISR — 60秒
  };
};

export default function Blog({ posts }: { posts: Post[] }) {
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

// 📁 pages/dashboard.tsx (SSR — リクエストごとに)
import type { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps<{ user: User }> = async (ctx) => {
  const user = await fetchUser(ctx.req.cookies.session);
  return { props: { user } };
};

export default function Dashboard({ user }: { user: User }) {
  return <h1>こんにちは、{user.name}</h1>;
}

// 欠点:
// - フェッチモードをページ単位で決定 (1ページ内で一部だけISRなどは不可)
// - データを props にシリアライズ → 大きなオブジェクトは非効率

// ✅ App Router — fetch オプションでキャッシュポリシーを決定

interface Post { id: number; title: string; }
interface User { id: number; name: string; }

// 📁 app/blog/page.tsx — ISR 60秒
export default async function Blog() {
  const posts: Post[] = await fetch('https://api/posts', {
    next: { revalidate: 60, tags: ['posts'] },
  }).then(r => r.json());

  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

// 📁 app/dashboard/page.tsx — SSR (リクエストごとに)
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const session = cookies().get('session')?.value;
  const user: User = await fetch(`https://api/users/me`, {
    cache: 'no-store', // リクエストごと
    headers: { cookie: `session=${session}` },
  }).then(r => r.json());

  return <h1>こんにちは、{user.name}</h1>;
}

// 📁 app/mixed/page.tsx — 1ページ内で異なるポリシー
export default async function Mixed() {
  // 静的コンテンツ — 永続キャッシュ
  const intro = await fetch('https://api/intro').then(r => r.json());

  // 更新頻度の低いコンテンツ — 5分
  const posts = await fetch('https://api/posts', {
    next: { revalidate: 300 },
  }).then(r => r.json());

  // ユーザーデータ — 毎回
  const me = await fetch('https://api/me', {
    cache: 'no-store',
  }).then(r => r.json());

  return <Layout intro={intro} posts={posts} me={me} />;
}

// 📁 app/posts/actions.ts — 記事作成後にキャッシュを無効化
'use server';
import { revalidateTag } from 'next/cache';

export async function createPost(formData: FormData) {
  await db.post.create({
    data: { title: formData.get('title') as string },
  });
  revalidateTag('posts'); // tags: ['posts'] が付いた fetch キャッシュをすべて無効化
}