[Next.js] revalidatePath

revalidatePath

Next.js에서는 개발 환경에서는 정상적으로 동작하던 부분들이 배포 환경에서는 동작이 되지 않는 경우가 있다.

예를 들어, 새로운 글을 생성하게 되면, 새로운 게시글이 작성이 된다고 가정 했을 때

개발 환경에서는 문제가 없겠지만,

배포 환경에서는 아무리 글을 추가해도, 해당 페이지에 게시글이 추가되지 않을 것 이다.,

이는 Next.js의 pre-rendering 때문이다.

Next.js는 npm run build 명령어를 통해 build를 시작하게 되면, 실제로 앱에서 사전 생성될 수 있는 모든 페이지를 pre-rendering하기 때문에, 기본적으로 동적 웹페이지가 아닌 정적 웹페이지가 된다.

이를 해결하려면, revalidatePath 함수를 이용하여, 특정 path에 속하는 캐시를 revalidation을 해주어야 한다.

아래와 같이 코드를 작성하면, /meals 페이지에 대해서만 revalidation을 진행하며,

revalidatePath("/meals");

중첩된 모든 페이지에 대해 revalidation을 진행해야 하는 상황이라면, 다음과 같이 두 번째 인자로 layout을 넣어주면 된다.

revalidatePath("/meals", "layout");