revalidateTag 사용 시 ReviewDetail 리렌더링
revalidateTag를 사용하더라도 결국 Review page가 모두 리렌더링 되는 것으로 보입니다. 이는 자연스러운 동작일까요?
그렇다면,ReviewDetail에서 사용하고 있는 API (책 상세 정보 가져오기)는 굳이 호출될 필요가 없는데 추가 호출이 되는 것 아닐까요? 이런 상황에서 revalidateTag를 사용하는 게 좋은 방법이 맞는지 궁금합니다!
답변 3
0
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가 뜨진 않아서 궁금합니다.
0
네 맞습니다. 캐싱 확인은 개발모드 로그로 확인하시면 됩니다.
프로젝트를 개발모드로 가동한 다음 book/1 페이지에 접속합니다. 그럼 다음과 같은 로그가 발생하게 됩니다.
위 로그의 도서 데이터를 불러오는 API "/book/1"은 cache-hit로 일단 캐싱된 데이터를 사용하는 걸 볼 수 있습니다. 이 상태에서 페이지에 새로운 댓글을 작성합니다
그럼 서버 액션이 호출되어 다음과 같이 POST 요청이 발생했다는 로그가 나타납니다. 이 상태에서 페이지를 새로고침합니다.
이렇게 페이지를 새로고침해도 "/book/1"로 요청되는 도서 데이터 API는 캐시된 데이터를 그대로 사용함을 볼 수 있습니다.
0
안녕하세요 이정환입니다.
"5.1) 풀라우트 캐시 1" 챕터의 13분 경에서 말씀드렸듯이 페이지를 구성하는 데이터 캐시들 중 하나의 캐시라도 무효화 되면 페이지 또한 다시 생성됩니다.
추가로 페이지가 재 생성된다고 하여 해당 페이지 내의 모든 데이터 캐시가 무효화되는 것은 아닙니다. 앞선 강의에서 말씀드렸듯 데이터 캐시와 풀라우트 캐시는 별도로 동작하기 때문에 데이터 캐시를 그대로 둔 채로 (즉 캐싱된 데이터를 사용하는 방식으로) 페이지만 새롭게 생성하게 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. sunwon lee님.
revalidateTag를 사용하실 때 발생하는 전반적인 리렌더링과 관련하여 궁금해하시는 부분에 대한 답을 드리겠습니다.
revalidateTag 사용과 리렌더링
revalidateTag는 지정한 태그와 연관된 캐시된 데이터를 다시 유효화하여, 데이터 변경 시 캐시를 최신 상태로 유지하는 역할을 합니다. 태그를 사용하여 특정 데이터만 재검증할 수 있도록 설계되었지만, 실제로 적용 시 페이지 전체가 리렌더링될 수 있습니다. 이는 데이터의 일관성을 보장하기 위한 자연스러운 동작일 수 있습니다.
자연스러운 동작 여부
- 전체 리렌더링 이유: 컴포넌트의 상태나 데이터가 변경되면 리액트는 이를 감지하고 변경된 부분을 업데이트합니다. 따라서,
revalidateTag로 인해 데이터가 업데이트되면 연관된 컴포넌트(여기선 Review 페이지 전체)가 리렌더링될 수 있습니다.
API 추가 호출 가능성
- 불필요한 API 호출: ReviewDetail에서 사용되는 API가 변경된 데이터와 관련이 없지만, 전체 페이지가 리렌더링되면서 함께 호출될 수 있습니다. 이는 최적화가 필요한 부분일 수 있습니다.
최적화 방법 및 고려사항
- 캐시 최적화: 불필요한 리렌더링을 감소시키기 위해 필요한 부분에만 캐시를 적용하고, 개별 컴포넌트의 상태 관리를 철저히 해야 합니다.
- 데이터 페치 방식 개선: 특정 데이터에 대해서만 API 호출이 필요하게 구조를 조정하여 불필요한 데이터를 요청하지 않도록 합니다.
- 리팩토링 필요: 데이터 페치 관련 로직을 적절히 분리하여 필요한 곳에서만 해당 데이터를 가져올 수 있도록 리팩토링 합니다.
관련 정보
유사한 주제에 대한 관련 질문 및 답변 포럼에 방문하시면, 비슷한 상황이나 다른 사용자의 경험담을 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
54
2
@/styles/globals.css'
0
50
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
84
2
모달 관련 질문
0
88
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
95
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
107
2
npx prisma db push 시 에러가 뜹니다.
0
131
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
118
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
111
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
130
1