Caching 缓存机制

// app/page.js
async function getItem() {
  // 自动缓存结果
  const res = await fetch('https://.../item/1')
  return res.json()
}
 
// 函数调用两次，但只会执行一次请求
const item = await getItem() // cache MISS
const item = await getItem() // cache HIT

function memoize(f) {
  var cache = {};
  return function(){
    var key = arguments.length + Array.prototype.join.call(arguments, ",");
    if (key in cache) {
      return cache[key]
    }
    else return cache[key] = f.apply(this, arguments)
  }
}

const { signal } = new AbortController()
fetch(url, { signal })

// utils/get-item.ts
import { cache } from 'react'
import db from '@/lib/db'
 
export const getItem = cache(async (id: string) => {
  const item = await db.item.findUnique({ id })
  return item
})

// 配置缓存行为
fetch(`https://...`, { cache: 'force-cache' | 'no-store' })
fetch(`https://...`, { next: { revalidate: 3600 } })

// 每小时重新验证
fetch('https://...', { next: { revalidate: 3600 } })

// 路由段级别配置
export const revalidate = 3600

// 基于路径
import { revalidatePath } from 'next/cache'
revalidatePath('/')

// 基于标签
fetch(`https://...`, { next: { tags: ['a', 'b', 'c'] } })
revalidateTag('a')

// 方式一：fetch 级别
fetch(`https://...`, { cache: 'no-store' })

// 方式二：路由段级别（影响该路由所有请求）
export const dynamic = 'force-dynamic'

// RSC Payload 示例
["$","div",null,{"children":["Don't give up.", ["$","$L1",null,{}]]}]
1:I{"id":123,"chunks":["chunk/[hash].js"],"name":"ClientComponent","async":false}

// 使用动态函数（cookies, headers, searchParams）
// 或路由段配置
export const dynamic = 'force-dynamic'
export const revalidate = 0

// 在 Server Action 中
revalidatePath('/path')
revalidateTag('tag')
cookies.set('name', 'value')  // 自动使路由缓存失效
cookies.delete('name')

// 客户端
router.refresh()  // 使当前路由缓存失效并重新获取

// 方案一：使用原生 <a> 标签（会导致页面刷新）
<a href="/about">About</a>

// 方案二：router.refresh（需客户端组件）
'use client'
import { useRouter } from 'next/navigation'

const router = useRouter()
router.push('/about')
router.refresh()

// 方案三：监听路由变化自动 refresh
'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams, useRouter } from 'next/navigation'

export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const router = useRouter()
  
  useEffect(() => {
    router.refresh()
  }, [pathname, searchParams])
 
  return null
}