// next.config.ts
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,  // 动态页面缓存 30 秒
      static: 300,  // 静态页面缓存 5 分钟
    },
  },
};

export default nextConfig;

// app/actions.ts
"use server";

import { updateTag } from "next/cache";

export async function updatePost(id: string, formData: FormData) {
  await db.post.update({
    where: { id },
    data: { title: formData.get("title") as string },
  });

  // 失效数据缓存 → 全路由缓存 → 路由器缓存（三层联动）
  updateTag("posts");
  updateTag(`post-${id}`);
}

"use client";

import { useRouter } from "next/navigation";

export default function EditForm({ postId }: { postId: string }) {
  const router = useRouter();

  async function handleSubmit(formData: FormData) {
    await fetch(`/api/posts/${postId}`, {
      method: "PUT",
      body: formData,
    });

    // 清除当前页面的路由器缓存，重新从服务器获取
    router.refresh();
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

"use server";

import { revalidatePath } from "next/cache";

export async function updatePost(id: string, formData: FormData) {
  await db.post.update({ where: { id }, data: { ... } });

  revalidatePath("/posts");        // 失效列表页
  revalidatePath(`/posts/${id}`);  // 失效详情页
}

// 默认行为：进入视口时预取
<Link href="/blog">博客</Link>

// 禁用预取
<Link href="/blog" prefetch={false}>博客</Link>

// app/posts/page.tsx — 列表页
export default async function PostsPage() {
  const res = await fetch("https://api.example.com/posts", {
    next: { tags: ["posts"] },
    cache: "force-cache",
  });
  const posts = await res.json();

  return (
    <div>
      {posts.map((post) => (
        <Link key={post.id} href={`/posts/${post.id}`}>
          <h2>{post.title}</h2>
        </Link>
      ))}
    </div>
  );
}

// app/posts/[id]/page.tsx — 详情页
export default async function PostPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    next: { tags: ["posts", `post-${id}`] },
    cache: "force-cache",
  });
  const post = await res.json();

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <Link href={`/posts/${id}/edit`}>编辑</Link>
    </div>
  );
}

// app/actions.ts — Server Action
"use server";

import { updateTag } from "next/cache";
import { redirect } from "next/navigation";

export async function updatePost(id: string, formData: FormData) {
  // 1. 更新数据库
  await db.post.update({
    where: { id },
    data: {
      title: formData.get("title") as string,
      content: formData.get("content") as string,
    },
  });

  // 2. 一次调用，四层缓存全部处理：
  //    - 第 1 层（请求记忆）：下次请求自动重新获取
  //    - 第 2 层（数据缓存）：updateTag 立即失效
  //    - 第 3 层（全路由缓存）：跟着数据缓存失效
  //    - 第 4 层（路由器缓存）：Server Action 自动通知客户端
  updateTag("posts");
  updateTag(`post-${id}`);

  // 3. 重定向到详情页（用户立刻看到新数据）
  redirect(`/posts/${id}`);
}

// app/posts/[id]/edit/page.tsx — 编辑页
import { updatePost } from "@/app/actions";

export default async function EditPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return (
    <form action={updatePost.bind(null, id)}>
      <input name="title" />
      <textarea name="content" />
      <button type="submit">保存</button>
    </form>
  );
}