[Next.js] Server Actions 시 놓치면 안되는 revalidatePath, revalidateTag ( 데이터 캐시 관리)

Server Actions으로 진행하던 사이드 프로젝트에서 잘 작동하던 게시글 등록이,

빌드 후에는 새 게시글이 리스트에서 반영이 되지 않는 현상이 일어났습니다.

 

구글링 후, 해결책을 찾을 수 있었는데 캐시 무효화 로직이 ( revalidatePath )빠져 있었습니다.

 

'use server' 를 명시한 서버 컴포넌트에서만 사용이 가능한 revalidatePath에 대해 정리해 봅니다.

 

 

1. revalidatePath

사용 목적

• 특정 경로의 캐시된 데이터를 무효화하고 새로운 데이터로 갱신할 때 사용됩니다.
  
  

기본 문법

revalidatePath(path, type?)

 

- path : 데이터 캐시를 재검증할 url 경로

- type : 'page' (디폴트 값), 'layout'

 

여기서 type은 두가지가 있는데

 

page : 특정 페이지만 재검증, 해당 페이지의 데이터만 새로고침

layout: 해당 경로의 레이아웃과 그 하위의 모든 페이지를 재검증

            공유 레이아웃을 사용하는 모든 관련 페이지들이 새로고침됨

 

상황에 맞게 사용하면 됩니다.

 

 

수정 후, 코드

await savePost(post);
  revalidatePath('/postsList'); 
  redirect('/postsList');

 

 

 

2. revalidateTag 

 

revalidatePath는 경로 기반으로 캐시를 무효화하지만,
revalidateTag는 사용자가 정의한 태그를 기반으로 캐시를 무효화합니다.

 

여기서 태그라는 것은 단순히 캐시 무효화를 위해 사용하기 위해 부여한 키값으로

fetch 시에 부여할 수 있으며, 캐시 무효화를 보다 편하게 해줍니다.

 

url 기준인 revalidatePath 보다

 

1. api 별로 동일한 태그를 줄 수 있어 일괄적으로 캐시관리가 가능하고

2. 특정 데이터 종류 별로 별도의  태그를 주어 필요한 부분만 선택적으로도 캐시 관리가 되는 게 장점 입니다.

예시

// 데이터 fetch 시 태그 지정
async function getData() {
  const res = await fetch('https://...', {
    next: { tags: ['posts'] } // 태그 지정
  });
  return res.json();
}

// 서버 액션에서 태그 기반 재검증
async function updateData() {
  await updateDatabase();
  revalidateTag('posts'); // 'posts' 태그가 있는 모든 데이터 재검증
}