revalidateTag 사용 시 ReviewDetail 리렌더링

한 입 크기로 잘라먹는 Next.js(15+)

7.5) 다양한 재검증 방식 살펴보기

작성

revalidateTag를 사용하더라도 결국 Review page가 모두 리렌더링 되는 것으로 보입니다. 이는 자연스러운 동작일까요?

그렇다면,ReviewDetail에서 사용하고 있는 API (책 상세 정보 가져오기)는 굳이 호출될 필요가 없는데 추가 호출이 되는 것 아닐까요? 이런 상황에서 revalidateTag를 사용하는 게 좋은 방법이 맞는지 궁금합니다!

react typescript next.js

답변 3

sunwon lee

질문자

async function BookDetail({ bookId }: { bookId: string }) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}`,
    { cache: "force-cache" }
  ).then((res) => {
    console.log("api called");
    return res;
  });

이렇게 BookDetail의 fetch 부분을 수정하고

리뷰 작성하기 API를 호출 했을 때 서버에 console이 찍히는 걸 볼 수 있는데, console이 찍히는 것과 상관없이 이 데이터는 캐시된 데이터를 보내주는 거라는 말씀이실까요?

혹시 캐시된 데이터를 보내주는 것을 어떻게 검증할 수 있는지 궁금합니다. 콘솔에 cache hit가 뜨진 않아서 궁금합니다.

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

"5.1) 풀라우트 캐시 1" 챕터의 13분 경에서 말씀드렸듯이 페이지를 구성하는 데이터 캐시들 중 하나의 캐시라도 무효화 되면 페이지 또한 다시 생성됩니다.

추가로 페이지가 재 생성된다고 하여 해당 페이지 내의 모든 데이터 캐시가 무효화되는 것은 아닙니다. 앞선 강의에서 말씀드렸듯 데이터 캐시와 풀라우트 캐시는 별도로 동작하기 때문에 데이터 캐시를 그대로 둔 채로 (즉 캐싱된 데이터를 사용하는 방식으로) 페이지만 새롭게 생성하게 됩니다.

인프런 AI 인턴

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

revalidateTag를 사용하실 때 발생하는 전반적인 리렌더링과 관련하여 궁금해하시는 부분에 대한 답을 드리겠습니다.

`revalidateTag` 사용과 리렌더링

revalidateTag는 지정한 태그와 연관된 캐시된 데이터를 다시 유효화하여, 데이터 변경 시 캐시를 최신 상태로 유지하는 역할을 합니다. 태그를 사용하여 특정 데이터만 재검증할 수 있도록 설계되었지만, 실제로 적용 시 페이지 전체가 리렌더링될 수 있습니다. 이는 데이터의 일관성을 보장하기 위한 자연스러운 동작일 수 있습니다.

자연스러운 동작 여부

전체 리렌더링 이유: 컴포넌트의 상태나 데이터가 변경되면 리액트는 이를 감지하고 변경된 부분을 업데이트합니다. 따라서, revalidateTag로 인해 데이터가 업데이트되면 연관된 컴포넌트(여기선 Review 페이지 전체)가 리렌더링될 수 있습니다.

API 추가 호출 가능성

불필요한 API 호출: ReviewDetail에서 사용되는 API가 변경된 데이터와 관련이 없지만, 전체 페이지가 리렌더링되면서 함께 호출될 수 있습니다. 이는 최적화가 필요한 부분일 수 있습니다.

최적화 방법 및 고려사항

캐시 최적화: 불필요한 리렌더링을 감소시키기 위해 필요한 부분에만 캐시를 적용하고, 개별 컴포넌트의 상태 관리를 철저히 해야 합니다.
데이터 페치 방식 개선: 특정 데이터에 대해서만 API 호출이 필요하게 구조를 조정하여 불필요한 데이터를 요청하지 않도록 합니다.
리팩토링 필요: 데이터 페치 관련 로직을 적절히 분리하여 필요한 곳에서만 해당 데이터를 가져올 수 있도록 리팩토링 합니다.

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