개념 설명
Next.js에서 revalidatePath는 서버 측에서 특정 경로의 캐시 데이터를 강제로 무효화하고 최신 상태로 업데이트하는 메서드임. 이는 데이터가 변경되었을 때 전체 페이지를 다시 빌드하지 않고도 사용자에게 최신 정보를 즉시 제공하기 위한 필수적인 기술임.
- 동작 원리: 호출 시 해당 경로의 Data Cache와 Full Route Cache를 모두 무효화(Purge) 처리함.
- 서버 전용: 클라이언트 컴포넌트가 아닌 Server Actions 또는 Route Handlers와 같은 서버 환경에서만 호출 가능함.
- 즉각적인 반영: 백엔드 DB의 데이터가 수정된 직후 호출하여 브라우저가 다음 요청 시 새로운 데이터를 받도록 유도함.
사용 상황 예시
이 기술은 데이터의 무결성과 최신성이 중요한 서비스에서 빛을 발함.
- 블로그/뉴스 게시물: 관리자가 글을 수정하거나 삭제한 즉시 상세 페이지에 반영이 필요할 때 사용.
- 쇼핑몰 상품 정보: 재고 수량이나 가격 정보가 변경되었을 때 고객에게 오정보를 노출하지 않기 위해 활용.
- 댓글 및 리뷰 시스템: 사용자가 리뷰를 작성한 직후 목록에 바로 나타나게 할 때 적합함.
기본 문법 및 활용 방식
상황에 따라 범위를 조절하여 캐시를 관리할 수 있음.
| 방식 | 코드 예시 | 설명 |
|---|---|---|
| 특정 페이지 | revalidatePath("/book/1") | 해당 ID를 가진 단일 페이지만 재검증 |
| 동적 경로(Page) | revalidatePath("/book/[id]", "page") | 해당 패턴을 가진 모든 동적 페이지를 재검증 |
| 레이아웃 단위 | revalidatePath("/(search)", "layout") | 특정 레이아웃을 공유하는 모든 하위 페이지 포함 |
| 전체 재검증 | revalidatePath("/", "layout") | 프로젝트 내 모든 페이지의 캐시를 무효화 |
| 태그 기준 | revalidateTag("review-1") | 특정 태그가 지정된 fetch 요청 캐시만 정밀 타격 |
자주 하는 실수
- 잘못된 경로 작성: 파일 시스템 경로와 실제 URL 경로를 혼동하여 작성하는 경우 재검증이 작동하지 않음.
- 클라이언트 측 호출 시도:
revalidatePath는 브라우저 API가 아니므로use client컴포넌트에서 직접 호출하면 에러 발생. Server Action으로 감싸서 처리 필요. - 과도한 전체 재검증:
revalidatePath("/", "layout")을 남발할 경우 서버 부하가 급증하고 캐싱의 이점이 사라짐. 꼭 필요한 범위만 타겟팅하는 것이 권장됨.
핵심 요약
- 서버 측 호출을 통한 특정 경로의 Data 및 Full Route 캐시 즉시 무효화.
- 페이지, 레이아웃, 태그 등 다양한 범위를 선택하여 정밀한 캐시 제어 가능.
- 데이터 수정 직후 호출하여 사용자에게 실시간에 가까운 최신 UI 제공.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
