revalidatePath란?

revalidatePath는 Next.js 13 이상에서 App Router (app 디렉토리) 를 사용할 때 특정 경로의 데이터를 다시 유효화(revalidate)하는 함수이다.

이는 서버에서 캐싱된 데이터를 강제로 무효화하고, 최신 데이터를 다시 불러오도록 하는 역할을 한다.

 

사용 예제

1. 기본 사용법

import { revalidatePath } from 'next/cache';

export async function updateData() {
  // 데이터 업데이트 로직 (예: DB 업데이트)
  
  // 특정 경로의 캐시를 무효화
  revalidatePath('/dashboard');
}

이렇게 하면 /dashboard 경로의 데이터가 다시 패칭된다.

 

2. 서버 액션에서 사용

Next.js 13.4+에서 서버 액션(Server Actions) 을 활용하면, 클라이언트에서 직접 특정 경로를 다시 유효화할 수 있다.

'use server';

import { revalidatePath } from 'next/cache';

export async function handleFormAction(formData: FormData) {
  // 데이터베이스 업데이트 로직
  await updateDatabase(formData);

  // 캐시 무효화
  revalidatePath('/dashboard');
}

이제 클라이언트에서 이 액션을 호출하면 /dashboard의 데이터가 최신 상태로 유지된다.

'use client';

import { useTransition } from 'react';
import { handleFormAction } from './actions';

export default function MyComponent() {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      onClick={() => {
        startTransition(() => {
          handleFormAction();
        });
      }}
      disabled={isPending}
    >
      업데이트
    </button>
  );
}

 

3. 특정 서브경로만 무효화

revalidatePath('/products/[id]');

위 코드는 /products/123, /products/456 등의 페이지 캐시를 무효화할 수 있다.

 

4. 동적 경로 (catch-all routes)

revalidatePath('/blog', 'layout');

• default: 해당 경로의 페이지만 다시 불러옴
• 'layout': 해당 경로의 레이아웃 전체를 다시 불러옴

revalidatePath vs revalidateTag

기능	revalidatePath	revalidateTag
캐시 무효화 단위	특정 경로	특정 태그 (더 세밀한 제어 가능)
사용 예제	revalidatePath('/dashboard')	revalidateTag('products')
사용 방식	fetch() 기반 데이터 캐싱을 무효화	fetch() 호출 시 { next: { tags: ['products'] } } 와 함께 사용

• 경로 기반 무효화가 필요하면 revalidatePath
• 데이터 단위로 더 정밀한 무효화가 필요하면 revalidateTag

👉 결론

✅ revalidatePath는 Next.js의 경로 기반 캐시 무효화 함수
✅ 데이터 변경 후 특정 페이지를 최신 상태로 유지할 때 유용
✅ 서버 액션과 함께 사용하면 실시간 UI 업데이트 구현 가능