Next.js 15/16 cacheLife()와 use cache: remote/private — 인스턴스 간 캐시 공유와 개인화 데이터 보호를 단일 API로

// next.config.ts — Next.js 15
const nextConfig = {
  experimental: {
    dynamicIO: true, // Next.js 15 기준
  },
}
 
// next.config.ts — Next.js 16
const nextConfig = {
  experimental: {
    cacheComponents: true, // Next.js 16 기준
  },
}

// 파일 전체에 캐시 적용
'use cache'
 
export async function BlogList() { ... }
export async function BlogSidebar() { ... } // 이 함수도 캐시 적용됨

// 특정 함수에만 캐시 적용
export async function BlogList() {
  'use cache'
  // 이 함수만 캐시 적용
}

// next.config.ts
const nextConfig = {
  experimental: {
    cacheComponents: true,
  },
  cacheLife: {
    blog: {
      stale: 3600,       // 1시간: 클라이언트·CDN 캐시 신뢰
      revalidate: 900,   // 15분 후 백그라운드 갱신 (s-maxage: 900)
      expire: 86400,     // 24시간: 완전 만료
    },
    realtime: {
      stale: 0,
      revalidate: 30,
      expire: 300,       // 최소 5분 이상
    },
    static: {
      stale: 86400,
      revalidate: 3600,
      expire: 604800,    // 7일
    },
  },
}

// components/BlogList.tsx
'use cache'
import { cacheLife, cacheTag } from 'next/cache'
import { db } from '@/lib/db' // 직접 DB 접근 — 서버 컴포넌트에서 상대 경로 fetch는 동작하지 않습니다
 
export async function BlogList() {
  cacheLife('blog')
  cacheTag('blog-list')
 
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 20,
    select: { id: true, title: true, slug: true, createdAt: true },
  })
 
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
}

// app/blog/[slug]/page.tsx
'use cache'
import { cacheLife, cacheTag } from 'next/cache'
import { db } from '@/lib/db'
 
export default async function BlogPost({ params }: { params: { slug: string } }) {
  cacheLife('blog')
  cacheTag(`post-${params.slug}`)
 
  const post = await db.post.findUnique({ where: { slug: params.slug } })
  if (!post) return <NotFound />
 
  return <article>{post.content}</article>
}

// app/actions/invalidate.ts — 게시글 수정 시 온디맨드 무효화
'use server'
import { revalidateTag } from 'next/cache'
 
export async function invalidatePost(slug: string) {
  await revalidateTag(`post-${slug}`)
  await revalidateTag('blog-list') // 목록도 함께 갱신
}

// cache-handlers/redis-handler.ts
import { createClient } from 'redis'
 
const client = createClient({ url: process.env.REDIS_URL })
 
async function getClient() {
  if (!client.isOpen) {
    await client.connect()
  }
  return client
}
 
export default {
  async get(key: string) {
    try {
      const c = await getClient()
      const value = await c.get(key)
      return value ? JSON.parse(value) : undefined
    } catch (error) {
      console.error('[CacheHandler] get error:', error)
      return undefined // 캐시 미스로 처리하여 서비스 중단 방지
    }
  },
  async set(key: string, value: unknown, ttl: number) {
    try {
      const c = await getClient()
      await c.setEx(key, ttl, JSON.stringify(value))
    } catch (error) {
      console.error('[CacheHandler] set error:', error)
    }
  },
  async delete(key: string) {
    try {
      const c = await getClient()
      await c.del(key)
    } catch (error) {
      console.error('[CacheHandler] delete error:', error)
    }
  },
}

// next.config.ts
const nextConfig = {
  experimental: { cacheComponents: true },
  cacheHandlers: {
    remote: require.resolve('./cache-handlers/redis-handler'),
  },
  cacheLife: {
    catalog: { stale: 3600, revalidate: 1800, expire: 7200 },
  },
}

// components/ProductCatalog.tsx
// 파일 최상단 선언 → 이 파일의 모든 함수에 'use cache: remote' 적용
'use cache: remote'
import { cacheLife, cacheTag } from 'next/cache'
import { db } from '@/lib/db'
 
interface Props {
  categoryId: string
}
 
// fetchProductsByCategory: DB에서 카테고리별 상품 목록을 가져오는 내부 함수
export async function ProductCatalog({ categoryId }: Props) {
  cacheLife('catalog')
  cacheTag(`catalog-${categoryId}`)
 
  const products = await db.product.findMany({
    where: { categoryId, isActive: true },
    select: { id: true, name: true, price: true, imageUrl: true },
  })
 
  return <ProductGrid products={products} />
}

// components/UserDashboard.tsx
// 함수 내부 선언 → 이 함수에만 'use cache: private' 적용
import { cacheLife } from 'next/cache'
import { cookies } from 'next/headers'
 
// fetchUserData: sessionToken으로 사용자 데이터를 조회하는 내부 함수
// 반환 타입: { name: string; stats: UserStats; recentActivity: Activity[] }
export async function UserDashboard() {
  'use cache: private'
  cacheLife({ stale: 300, revalidate: 60, expire: 600 })
 
  const cookieStore = await cookies()
  const sessionToken = cookieStore.get('session')?.value
 
  if (!sessionToken) return <LoginPrompt />
 
  const userData = await fetchUserData(sessionToken)
  return <DashboardView data={userData} />
}