Next.js 15 の use cache ディレクティブについて調べてみた

npx create-next-app@canary

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

'use cache'

import { unstable_cacheLife as cacheLife } from 'next/cache'
import { Header } from 'compornent/ui/header'

export default function Layout({ children }: { children: ReactNode }) {
  const header = await fetch('/api/header') // このデータ取得がキャッシュされる
  
  return (
    <div>
      <Header data={header} /> {/* このコンポーネントはキャッシュされない */}
      {children}
    </div>
  )
}

export async function Bookings({ type = 'haircut' }: BookingsProps) {
  'use cache'

  async function getBookingsData() {
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    return data
  }

  return //...
}

export async function getData({ id }) {
  'use cache'

  const data = await fetch(`/api/data${id}`)
  return data
}

'use cache'

import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife({
    stale: 5 * 60 * 1000,       // 5分間：クライアントキャッシュ有効期間
    revalidate: 15 * 60 * 1000, // 15分：サーバー上でのキャッシュを更新間隔
    expire: 24 * 60 * 60 * 1000 // 24時間：キャッシュの最大保持期間
  })

  const data = await fetchData()
  return <div>{data}</div>
}

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
    cacheLife: {
      biweekly: {
        stale: 60 * 60 * 24 * 14, // 14 days
        revalidate: 60 * 60 * 24, // 1 day
        expire: 60 * 60 * 24 * 14, // 14 days
      },
    },
  },
}

module.exports = nextConfig

// app/page.tsx
'use cache'

import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife('biweekly')
  return <div>Page</div>
}

import { unstable_cacheTag as cacheTag } from 'next/cache'

export async function getData() {
  'use cache'
  cacheTag('my-data')

  const data = await fetch('/api/data')
  return data
}

import { revalidateTag } from 'next/cache'

export default async function submit() {
  await addPost()
  revalidateTag('my-data')
}