缓存策略体系

// 1. 不缓存 — 每次请求都查数据源（Next.js 15 默认行为）
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store',
})
 
// 2. 强制缓存 — 只在构建时请求一次，永久使用缓存
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
})
 
// 3. 基于时间的重新验证（ISR 模式）— 缓存 60 秒，过期后后台刷新
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 },  // 60 秒后标记为 stale
})
 
// 4. 基于标签的按需重新验证 — 精确控制
const data = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
})

// 1. 给 fetch 打标签
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { tags: ['posts'] },
  })
  return res.json()
}
 
async function getPost(id: string) {
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    next: { tags: ['posts', `post-${id}`] },
  })
  return res.json()
}

// 2. 数据变更时按标签刷新
'use server'
 
import { revalidateTag } from 'next/cache'
 
export async function createPost(data: FormData) {
  await db.insert(posts).values({ ... })
 
  revalidateTag('posts')  // 刷新所有带 'posts' 标签的缓存
}
 
export async function updatePost(id: string, data: FormData) {
  await db.update(posts).set({ ... }).where(eq(posts.id, id))
 
  revalidateTag(`post-${id}`)  // 只刷新这篇文章
  revalidateTag('posts')        // 同时刷新列表
}

import { revalidatePath } from 'next/cache'
 
// 刷新特定页面
revalidatePath('/blog')
 
// 刷新特定页面及其所有子路由
revalidatePath('/blog', 'layout')
 
// 刷新动态路由的某个参数
revalidatePath('/blog/[slug]', 'page')

// ✅ 静态渲染 — 构建时生成，CDN 缓存
// app/about/page.tsx
export default function AboutPage() {
  return <div>关于我们</div>
}
 
// ✅ 静态渲染 + ISR — 构建时生成，定期刷新
// app/blog/page.tsx
export const revalidate = 3600  // 每小时重新验证
 
export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 },
  })
  return <PostList posts={posts} />
}
 
// ❌ 动态渲染 — 每次请求都重新渲染（不进入 Full Route Cache）
// app/dashboard/page.tsx
import { cookies } from 'next/headers'
 
export default async function DashboardPage() {
  const session = (await cookies()).get('session')  // 使用了 cookies() → 强制动态
  const data = await getUserData(session?.value)
  return <Dashboard data={data} />
}

// 强制动态渲染（退出 Full Route Cache）
export const dynamic = 'force-dynamic'
 
// 强制静态渲染（如果用了动态函数会报错）
export const dynamic = 'force-static'
 
// 设置整个路由的 revalidate 时间
export const revalidate = 60
 
// 设置请求超时（ISR 场景）
export const maxDuration = 30

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await db.query.posts.findMany({
    columns: { slug: true },
  })
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// 不在列表中的 slug 会按需渲染并缓存（默认行为）
// 要禁止这种回退行为：
export const dynamicParams = false  // 未预渲染的 slug 返回 404

'use client'
 
import { useRouter } from 'next/navigation'
 
export function RefreshButton() {
  const router = useRouter()
 
  return (
    <button onClick={() => router.refresh()}>
      刷新数据
    </button>
  )
}

import Link from 'next/link'
 
// 默认：视口内的 Link 会被自动预获取
<Link href="/about">关于</Link>
 
// 禁用预获取（不常访问的页面）
<Link href="/terms" prefetch={false}>条款</Link>
 
// 完整预获取（预获取整个页面，而非只是共享 layout）
<Link href="/pricing" prefetch={true}>价格</Link>

// 这两个组件在同一个页面中
// page.tsx 和 sidebar.tsx 都调用了 getUser()
 
async function getUser() {
  // 这个 fetch 在一次渲染中只执行一次
  const res = await fetch('https://api.example.com/user')
  return res.json()
}
 
// app/dashboard/page.tsx
export default async function DashboardPage() {
  const user = await getUser()  // 第 1 次调用 → 实际 fetch
  return <main>Welcome, {user.name}</main>
}
 
// components/sidebar.tsx — 也在 dashboard layout 中使用
export async function Sidebar() {
  const user = await getUser()  // 第 2 次调用 → 返回 memoized 结果
  return <aside>{user.avatar}</aside>
}

import { cache } from 'react'
import { db } from '@/lib/db'
 
// 用 cache() 包装数据库查询
export const getUser = cache(async (userId: string) => {
  return db.query.users.findFirst({
    where: eq(users.id, userId),
  })
})

// next.config.ts — 需要启用实验性功能
const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

'use cache'
 
import { db } from '@/lib/db'
 
export async function getPopularPosts() {
  // 整个函数的返回值被缓存
  const posts = await db.query.posts.findMany({
    orderBy: desc(posts.views),
    limit: 10,
  })
  return posts
}

import { cacheLife, cacheTag } from 'next/cache'
 
async function getPost(slug: string) {
  'use cache'
 
  cacheLife('hours')           // 缓存 1 小时
  cacheTag(`post-${slug}`)    // 打标签，支持按需刷新
 
  return db.query.posts.findFirst({
    where: eq(posts.slug, slug),
  })
}