-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
swr 캐싱
23.06.22 05:46 작성 조회수 316
0
다른분들 질문 보다보니 부모컴포넌트와 자식컴포넌트가 동일한 key값으로 서버에 요청을 보내면 한번만 요청을 보내고 부모컴포넌트에서 캐싱된 값을 자식컴포넌트가 사용한다고 봤는데 공식 홈페이지 예제 보니 특정 페이지 내부에서 화면에 렌더링되는 모든 컴포넌트에서는 동일한 key값으로 서버에 요청하는경우에 하나만 요청되고 모두 캐싱되어서 같은화면?내에서 렌더링되는 컴포넌트들은 값을 공유하는것같은데 이도 맞을까요?
nextjs _app Custom App component 에서 요청하는 swr key는 전역적으로 캐싱이 안되나요?
_app에서 서버로 사용자 정보를 요청하도록 코드를 작성해놨고 각 페이지 마다도 동일한 key값으로 사용자 정보를 서버에 요청하도록 작성해두었습니다. 페이지를 이동하더라도 app에서 사용한 key값과 각 페이지에서 서버로 요청하는 key값이 동일하니 캐싱되어 서버로 사용자 정보를 재요청하지 않고 캐싱된 값을 사용해야된다고 생각되는데 계속해서 서버로 사용자 정보를 재요청을 보냅니다. 왜 그런것일까요..?
답변을 작성해보세요.
1
조현영
지식공유자2023.06.22
네 부모자식관계가 아니라 swr에서 같은 key면 전부 다 공유됩니다.
_app에서 하는 것도 캐싱이 됩니다. 다만 캐싱 타임이 짧아서 다시 요청을 보내는 것일 수도 있습니다. 캐싱 시간을 확인해보세요.
haruharu
질문자2023.06.26
추가로 질문드립니다.!
이전에 2번 관련해서 질문했던부분 조금 더 보다보니 그렇게 동작했던 이유가 revalidateOnMount의 default 값이 true이다보니 _app 컴포넌트에 작성하면 페이지 변경시 새롭게 컴포넌트가 리렌더링되면서 mount가 되어 발생하는것같은데 맞을까요?
해당 문제를 dedupingInterval로 해결하려는데 dedupingInterval을 사용하면 revalidateOnFocus가 동작하지 않는게 맞나요?? dedupingInterval 사용하면서 revalidateOnFocus 하고자하면 window.addEventListener의 focus 이벤트 사용해서 revalidate 시키는 방법으로 해결하긴했는데 이렇게 하는 방법이 맞는지 아니면 다른 방법이 있는지 궁금합니다!
조현영
지식공유자2023.06.26
revalidateOnMount의 기본값은 undefined라고 되어있네요. 다른 게 원인 아닐까요?
dedupingInterval 기간 내이더라도 focus가 되면 revalidate하려고 하시는 건가요?? 그렇다면 focus 시마다 보내는게 맞을것같긴 한데 focus때 두 번 revalidate되는 문제가 있을 수 있으니 revalidateOnFocus는 끄셔야할 것 같습니다.
답변 1