npm run build

Route (app)                              Size     First Load JS
┌ ○ /                                    5 kB       87.2 kB
├ ○ /blog                                3 kB       85.2 kB
├ ƒ /profile                             2 kB       84.2 kB
└ ○ /about                               1 kB       83.2 kB

○  (Static)   构建时渲染，结果被全路由缓存
ƒ  (Dynamic)  每次请求时渲染，不缓存

// app/blog/page.tsx
export default async function BlogPage() {
  // 没有使用动态函数（cookies、headers、searchParams）
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600, tags: ["posts"] },
  });

  const posts = await res.json();

  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  );
}

// app/profile/page.tsx
import { cookies } from "next/headers";

export default async function ProfilePage() {
  // 使用了动态函数 → 页面变成动态的
  const token = (await cookies()).get("token")?.value;

  const res = await fetch("https://api.example.com/user/me", {
    headers: { Authorization: `Bearer ${token}` },
  });

  const user = await res.json();

  return <div>{user.name}</div>;
}

// cookies() — Next.js 15+ 是异步的
import { cookies } from "next/headers";
const token = (await cookies()).get("token");

// headers() — Next.js 15+ 是异步的
import { headers } from "next/headers";
const userAgent = (await headers()).get("user-agent");

// searchParams（Page 组件的 props）
export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ q: string }>;
}) {
  const { q } = await searchParams;
}

// app/posts/[id]/page.tsx
// 没有 generateStaticParams → 动态
export default async function PostPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const post = await getPost(id);
  return <div>{post.title}</div>;
}

export const dynamic = "force-dynamic";

export default async function Page() {
  // 即使没有动态函数，也会每次渲染
}

// Next.js 15+ 默认 fetch 不缓存（no-store）
// 如果页面中所有 fetch 都没有显式缓存，页面可能被判定为动态
const res = await fetch("https://api.example.com/data");

// app/blog/page.tsx
// 页面级别的 revalidate：每小时重新生成
export const revalidate = 3600;

export default async function BlogPage() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  return <div>...</div>;
}

// 显式声明 force-cache（Next.js 15+ 需要显式声明）
const res = await fetch("https://api.example.com/posts", {
  cache: "force-cache",
});

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch("https://api.example.com/posts").then((r) =>
    r.json()
  );
  // 预渲染前 50 篇文章
  return posts.slice(0, 50).map((post) => ({ id: String(post.id) }));
}

export default async function PostPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const post = await getPost(id);
  return <div>{post.title}</div>;
}

// 整个页面声明为可缓存
"use cache";

import { cacheLife } from "next/cache";

export default async function BlogPage() {
  cacheLife("hours"); // 缓存 1 小时
  const posts = await getPosts();
  return <div>...</div>;
}

import { cookies } from "next/headers";

export default async function Page() {
  await cookies(); // 读取 cookies，页面变成动态的
  // ...
}

export const dynamic = "force-dynamic";

// app/blog/page.tsx
export const revalidate = 3600; // 3600 秒 = 1 小时

export default async function BlogPage() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  return <div>...</div>;
}

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

import { updateTag } from "next/cache";

export async function createPost(formData: FormData) {
  // 1. 写入数据库
  await db.post.create({
    data: { title: formData.get("title") as string },
  });

  // 2. 立即失效——用户提交后马上看到新文章
  updateTag("posts");
}

// app/api/webhook/route.ts
import { revalidateTag } from "next/cache";

export async function POST(request: Request) {
  const payload = await request.json();

  // CMS 内容更新时触发
  revalidateTag("posts", "max");

  return Response.json({ revalidated: true });
}

"use server";

import { revalidatePath } from "next/cache";

export async function createPost(formData: FormData) {
  await db.post.create({ data: { ... } });

  // 失效指定路径的全路由缓存
  revalidatePath("/blog");                 // 失效 /blog 页面
  revalidatePath("/blog/[slug]", "page");  // 失效所有 /blog/xxx 页面
  revalidatePath("/", "layout");           // 失效整个站点
}

ls -la .next/server/app/

# 静态页面（被全路由缓存）
blog.html          # HTML 缓存
blog.rsc           # RSC Payload 缓存

# 动态页面（没有缓存文件）
profile.js         # 只有运行时代码

// 方案 1（最推荐）：使用 tags + updateTag 按需失效
const res = await fetch("https://api.example.com/posts", {
  next: { tags: ["posts"] },
  cache: "force-cache",
});
// 数据变更时在 Server Action 中调用 updateTag("posts")

// 方案 2：添加 revalidate 定时更新
export const revalidate = 60; // 每分钟检查更新

// 方案 3：强制动态（放弃缓存）
export const dynamic = "force-dynamic";

// 只允许 generateStaticParams 返回的路由，其他返回 404
export const dynamicParams = false;

export async function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }, { id: "3" }];
}

// 使用 tags + revalidate 双保险
export const revalidate = 3600; // 兜底：最多 1 小时更新

export default async function BlogPage() {
  const res = await fetch("https://api.example.com/posts", {
    next: { tags: ["posts"] },
    cache: "force-cache",
  });
  const posts = await res.json();
  return <div>...</div>;
}

// 发布新文章时主动失效
// app/actions.ts
"use server";
import { updateTag } from "next/cache";

export async function publishPost() {
  await db.post.create({ ... });
  updateTag("posts"); // 立即失效，用户马上看到新文章
}

// 直接放弃全路由缓存
export const dynamic = "force-dynamic";

export default async function AdminPage() {
  const res = await fetch("https://api.example.com/stats");
  const stats = await res.json();
  return <div>...</div>;
}

// 产品列表：静态 + 按需更新
// app/products/page.tsx
export default async function ProductsPage() {
  const res = await fetch("https://api.example.com/products", {
    next: { tags: ["products"], revalidate: 3600 },
    cache: "force-cache",
  });
  const products = await res.json();
  return <div>...</div>;
}

// 购物车：动态（每个用户不同）
// app/cart/page.tsx
import { cookies } from "next/headers";

export default async function CartPage() {
  const token = (await cookies()).get("token")?.value;
  const res = await fetch("https://api.example.com/cart", {
    headers: { Authorization: `Bearer ${token}` },
  });
  const cart = await res.json();
  return <div>...</div>;
}