인프런 커뮤니티 질문&답변

안녕하세요.

이 내용을 이해하려면 먼저 몇 가지 배경 지식이 필요합니다.

우선 revalidatePath()는 데이터를 즉시 무효화하는 함수가 아닙니다. 해당 경로는 다음 방문 시점에 재검증되도록 설정하는 함수입니다.

다만, 서버 액션(Server Action) 안에서 revalidatePath()를 호출하면, 서버 액션이 내부적으로 router.refresh()와 유사한 동작을 수행하기 때문에 같은 페이지에 머물러 있어도 데이터가 즉시 변경된 것처럼 보일 수 있습니다. 이 점을 먼저 이해하는 것이 중요합니다.

revalidatePath 함수는 두 개의 매개변수를 받습니다.
첫 번째는 경로(path)이고, 두 번째는 무효화 타입(type)입니다.

두 번째 매개변수가 "layout"인 경우, 첫 번째 매개변수로 전달한 경로에서 사용 중인 layout.tsx를 사용하는 모든 경로가 함께 무효화됩니다. 따라서 해당 레이아웃을 공유하는 페이지들의 데이터가 일괄적으로 갱신됩니다.

반면, 두 번째 매개변수가 "page"인 경우에는 첫 번째 매개변수에 해당하는 경로의 page.tsx와 그 페이지가 사용하는 layout.tsx가 무효화 대상이 됩니다.

예를 들어, /about 경로에서 revalidatePath("/about", "page")를 호출하면 /about/page.tsx와 해당 페이지가 사용하는 /about/layout.tsx가 무효화됩니다. 서버 액션에서 호출한 경우에는 즉시 반영된 것처럼 보이게 됩니다.

하지만 /about/detail 경로에서 revalidatePath("/about", "page")를 호출하면 상황이 달라집니다. 현재 위치한 경로와 첫 번째 인자로 전달한 경로가 다르기 때문에, 즉시 무효화가 일어나지 않고 다음에 /about을 방문할 때 재검증이 수행됩니다. 따라서 /about/detail에서는 변화가 보이지 않지만, 이후 /about으로 이동하면 /about/page.tsx의 데이터가 새로 갱신됩니다.

여기서 한 가지 더 이해해야 할 부분은 라우터 캐시(router cache)입니다.

/about/page.tsx와 /about/detail/page.tsx는 모두 공통으로 /about/layout.tsx를 사용합니다. 이 레이아웃 파일은 기본적으로 라우터 캐시에 의해 재사용됩니다. 즉, 한 번 렌더링되면 특별한 경우(예: router.refresh() 호출)가 아니면 다시 렌더링되지 않습니다.

따라서 /about 경로에서 무효화를 수행하면 서버 액션이 router.refresh()와 같은 효과를 내므로 about/layout.tsx도 함께 재렌더링됩니다.

그러나 /about/detail에서 /about 경로를 무효화한 경우에는 즉시 아무 일도 일어나지 않다가, 이후 /about으로 이동하면 그때 재검증이 이루어집니다. 다만 이때도 layout.tsx는 라우터 캐시에 의해 재사용되기 때문에 값이 바로 변경되지 않을 수 있습니다.

하지만 브라우저를 새로고침하면 라우터 캐시가 초기화되므로, 그 시점에는 about/layout.tsx 역시 함께 무효화되어 데이터가 갱신되는 것을 확인할 수 있습니다.

이처럼 revalidatePath의 동작은 서버 액션 여부, 현재 경로, 무효화 타입, 그리고 라우터 캐시의 동작 방식에 따라 다르게 보일 수 있습니다.

더 궁금한 점이 있다면 언제든지 질문해주세요.

안녕하세요, 인프런 AI 인턴입니다. hwnii님.

Next.js에서 revalidatePath 함수는 특정 경로(예: /about)의 정적 페이지 데이터를 재검증하고 새로고침하는 역할을 합니다. 해당 경로에서만 작동하는 것이기 때문에 /about/detail 페이지에서는 /about에 설정된 revalidatePath가 영향을 미치지 않는 것이죠.

주요 원인을 간단히 설명드리자면:

1. 경로의 명확성:

   • revalidatePath("/about", "page")는 명시적으로 /about 경로의 페이지 데이터를 재검증하게 됩니다. 따라서 /about/detail 경로로는 적용되지 않습니다.
     
   • 각 경로는 별도로 설정해줘야 하며, 레이아웃이 동일하더라도 경로 단위로 작업이 진행됩니다.
     

2. 재검증 범위:

   • /about와 /about/detail는 서로 다른 경로로 간주되며, 재검증 역시 독립적으로 진행됩니다. 따라서 /about/detail에서의 조치는 /about에 영향을 주지 않습니다.
     

3. 즉시 반영:

   • /about/detail에서 재검증 버튼을 눌렀을 때 바로 변화가 없는 이유는 /about과는 다른 경로이기 때문입니다. 이후 /about 경로로 이동할 때만 /about의 변경사항이 반영됩니다.
     

이 부분이 도움이 되실 수 있는 추가 자료입니다:
- Next.js 경로 기반의 ISR(Incremental Static Regeneration) 작동 원리와 사례

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.