캐시 재검증 revalidatePath, revalidateTag

revalidate와 dynamic 등등은 캐싱에 대한 시간 설정 및 캐시 처리를 설정해주는 옵션이다.
더 유용한 revalidatePath, revalidateTag에대해서 정리를해봤다.

revalidatePath

revalidatePath는 Next.js 13에서 Incremental Static Regeneration (ISR)을 더욱 유연하게 사용할 수 있도록 도와주는 기능이다.

 

이 기능을 활용하면 특정 경로를 재검증할 수 있어, 페이지가 정적으로 생성된 후에도 최신 데이터를 쉽게 반영할 수 있다.

revalidatePath 한 눈에 살펴보기

• 목적: 특정 경로에 대해 재검증을 요청하여, 최신 데이터를 가져오도록 하는 기능이다.
• 사용 방법: 서버 사이드에서 API 요청이나 특정 조건을 만족했을 때 호출할 수 있다.

사용 예시

import { revalidatePath } from 'next/cache';

export default async function handler(req, res) {
  // 특정 조건을 만족하는 경우에 경로를 재검증
  if (req.method === 'POST') {
    // 데이터 변경이 일어났다면
    revalidatePath('/messages'); // '/messages' 경로를 재검증한다.
    revalidatePath('/something'); // '/something' 경로를 재검증한다. 여러번 사용 가능함.
    return res.status(200).json({ message: 'Revalidated successfully' });
  }
  res.status(405).end();
}

revalidatePath를 사용할 때 적용할 수 있는 옵션은 다음과 같다.

 

revalidatePath('/message','layout'); // message 경로의 캐시를 재검증하고, 모든 중첩된 페이지의 캐시도 재검증하게 한다.

revalidatePath('/message','page'); // page설정은 default값으로, 생략해도 page값이 설정된다. 특정 페이지의 캐시만 재검증한다.

revalidatePath('/','layout'); // 모든 페이지의 캐시된 데이터를 재검증하고, 새로운 데이터를 가져온다.

revalidateTag

revalidateTag는 Next.js에서 데이터를 재검증하는 데 유용한 기능으로,

 

특정 태그에 기반해 관련된 페이지나 데이터를 재검증할 수 있게 해준다.

 

이 기능은 주로 데이터 변경이 일어날 때 해당 데이터를 참조하는 모든 페이지를 효과적으로 업데이트하는 데 사용된다.

사용 예시

// 컴포넌트..
const response = await fetch('http://localhost:8080/messages',{
 next: { tags:['msg'] } 
});

// 서버 api..
import { revalidateTag } from 'next/cache';

export default async function handler(req, res) {
  // 특정 데이터가 변경되었을 때
  if (req.method === 'POST') {
    // 예: 새로운 메시지가 추가되었다면
    revalidateTag('msg'); // 'msg' 태그를 가진 모든 페이지를 재검증한다.
    return res.status(200).json({ message: 'Revalidated successfully' });
  }
  res.status(405).end(); 
}

 

revalidateTag를 호출하면 해당 태그와 관련된 모든 경로의 캐시가 무효화되고, 다음 요청 시 서버에서 새 데이터를 가져온다.

 

이를 통해 데이터가 변경될 때마다 관련된 모든 페이지에 최신 정보를 쉽게 반영할 수 있다.

 

revalidatePath()를 여러번 호출하는 대신에 사용하여 그 태그와 관련된 페이지들의 모든 캐시된 데이터를 재검증하는 등의 활용 방식있다.