`revalidateTag`로 CMS 웹훅 연동하기 — Next.js 온디맨드 캐시 즉시 갱신 실전 가이드

import { cacheTag, cacheLife } from 'next/cache';
 
async function getPost(slug: string) {
  'use cache';
  cacheTag('post', `post-${slug}`);
  // 'max' 프로파일: stale 최대 1년의 장기 캐시 수명 (Next.js 기본 프로파일)
  cacheLife('max');
  return db.post.findUnique({ where: { slug } });
}

[CMS 편집 저장]
     ↓ 웹훅 HTTP POST
[Next.js Route Handler]
     ↓ revalidateTag() 호출
[해당 태그 캐시 → stale 마킹]
     ↓ 다음 방문자 요청
[백그라운드에서 최신 데이터 fetch → 캐시 갱신]
 
(웹훅 누락 시) ·········→ [폴백 TTL 만료 후 자동 갱신]

// lib/queries.ts
import { cacheTag, cacheLife } from 'next/cache';
import { sanityClient } from './sanity';
 
async function getPosts() {
  'use cache';
  cacheTag('post'); // Sanity 문서 타입과 동일한 태그
  cacheLife('max');
 
  // 주의: 실무에서 데이터 규모가 클 경우 페이지네이션을 적용하는 것을 권장합니다
  return sanityClient.fetch(`*[_type == "post"]`);
}
 
async function getPostBySlug(slug: string) {
  'use cache';
  cacheTag('post', `post-${slug}`); // 타입 태그 + 개별 문서 태그 동시 부착
  cacheLife('max');
 
  return sanityClient.fetch(
    `*[_type == "post" && slug.current == $slug][0]`,
    { slug }
  );
}

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
import { parseBody } from 'next-sanity/webhook';
 
export async function POST(req: Request) {
  const { body, isValidSignature } = await parseBody(
    req,
    process.env.SANITY_WEBHOOK_SECRET
  );
 
  if (!isValidSignature) {
    return new Response('Invalid signature', { status: 401 });
  }
 
  // Sanity의 _type('post', 'author' 등)을 태그로 사용해 해당 타입 전체 무효화
  revalidateTag(body._type);
 
  // slug가 있다면 변경된 문서 하나만 정밀 무효화
  if (body.slug?.current) {
    revalidateTag(`post-${body.slug.current}`);
  }
 
  return Response.json({ revalidated: true, now: Date.now() });
}

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
 
export async function POST(req: Request) {
  const secret = req.headers.get('x-webhook-secret');
 
  if (secret !== process.env.CONTENTFUL_REVALIDATE_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
 
  const payload = await req.json();
  const contentType = payload.sys?.contentType?.sys?.id; // 'blogPost', 'author' 등
 
  revalidateTag(contentType);                     // 콘텐츠 타입 전체 무효화
  revalidateTag(`entry-${payload.sys.id}`);       // 특정 엔트리 ID 무효화
 
  return Response.json({ revalidated: true });
}

// lib/queries.ts
import { cacheTag, cacheLife } from 'next/cache';
 
async function getPostBySlug(slug: string) {
  'use cache';
 
  const post = await db.post.findUnique({
    where: { slug },
    include: { author: true },
  });
 
  // post가 null이면 조기 반환 (태그에 undefined가 섞이는 것을 방지)
  if (!post) return null;
 
  // 포스트 고유 태그 + 작가 태그 동시 부착
  // author 정보가 바뀌면 revalidateTag(`author-${id}`) 하나로 이 포스트도 무효화됨
  cacheTag('post', `post-${slug}`, `author-${post.author.id}`);
  cacheLife('max');
 
  return post;
}

// app/api/revalidate/route.ts — 작가 정보 변경 이벤트 처리
if (payload._type === 'author') {
  revalidateTag(`author-${payload._id}`);
  // 이 작가의 모든 포스트 캐시가 함께 무효화됩니다
}

import { cacheTag, cacheLife } from 'next/cache';
 
async function getPost(slug: string) {
  'use cache';
  cacheTag(`post-${slug}`);
  cacheLife({
    max: 3600,        // 최대 캐시 수명: 1시간
    revalidate: 3600, // 웹훅이 누락되더라도 1시간 후 자동 갱신되는 안전망
  });
  return db.post.findUnique({ where: { slug } });
}