App Router (12) - 데이터 재검증

2026.10.06 · 2분 읽기 · 조회 0

revalidatePath

Next.js 에서는 RevalidatePath를 사용해 특정 경로의 페이지를 다시 검증하도록 요청할 수 있다. 쉽게 말해

"이 경로의 페이지는 오래된 데이터를 사용하고 있으니, 캐시를 비우고 최신 데이터로 다시 만들어주세요"

라는 요청을 보내는 것이다.
게시글 작성이나 댓글 삭제처럼 서버의 데이터가 변경되는 작업이 끝난 뒤, RevalidatePath를 호출하면, 해당 경로의 페이지가 최신 데이터를 기준으로 다시 생성된다.

import { revalidatePath } from "next/cache";
revalidatePath(`재검증할 경로`);

다음과 같이 사용할 수 있다.

데이터 변경
   ↓
서버 액션 실행
   ↓
데이터 저장 또는 삭제
   ↓
RevalidatePath 호출
   ↓
관련 캐시 무효화
   ↓
최신 데이터로 페이지 재생성
   ↓
화면에 변경 내용 반영

이와 같은 흐름이라고 생각하면 된다.

주의점

1. RevalidatePath는 서버 액션이나 서버 컴포넌트 처럼 서버에서 실행되는 영역에서만 사용할 수 있다. 클라이언트 컴포넌트에서 직접 호출하지 않도록 주의한다.

2. 관련 데이터 캐시와 풀라우트 캐시를 무효화한다. 또한 새로운 페이지를 풀라우트 캐시에 즉시 저장하는 것이 아니기에, 다음 요청이 들어오면 최신 데이터를 다시 가져와 페이지를 생성하고, 그 이후 캐시가 갱신될 수 있다.

RevalidatePath 종류

공백

revalidatePath('페이지 경로')

두 번째 인수를 비워두면 특정 주소의 해당하는 페이지만 재검증한다.

'page'

revalidatePath('페이지 경로', 'page')

특정 경로의 모든 동적 페이지를 재검증한다.

revalidatePath("/book/[id]", 'page')

다음과 같이 작성한다면, 모든 책 페이지를 재검증할 것이다.

'layout'

revalidatePath('레이아웃 경로', 'layout')

특정 레이아웃을 가지는 모든 페이지를 재검증한다.

'/', 'layout'

revalidatePath("/", "layout")

루트 경로를 지정하고 사용하면 모든 페이지의 데이터를 재검증한다.

tags

revalidateTag('태그')

해당 태그 값을 가지는 데이터 캐시가 재검증된다.

const response = await fetch('/경로', { next : { tags : ['태그'] } })

fetch 메서드는 tag 값으로 데이터를 revaldation을 시켜줄 수 있다.
tanstack query의 쿼리키라고 생각하면 된다.

revalidatePath 는 해당 페이지에 해당하는 모든 데이터 캐시들을 초기화시키기 때문에, 특정 데이터만 초기화시킬 때는 revalidateTag가 더 효율적이라고 볼 수 있다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글