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

안녕하세요. 제로초님 좋은 강의 감사합니다.

해당 강의에서 fresh 상태일 때는 새로고침을 해도 서버에서 데이터를 가져오지 않고 캐시된 데이터를 사용한다고 하셨습니다.

그래서 fresh 상태일 때 새로고침을 하여 FollowRecommendSection를 트리거 하였고 해당 API가 요청이 되는지 보았습니다.

export default function FollowRecommendSection() {
  const { data } = useQuery<User[]>({
    queryKey: ['users', 'followRecommends'],
    queryFn: getFollowRecommends,
    staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준

    gcTime: 300 * 1000,
  });
  return data?.map((user) => <FollowRecommend user={user} key={user.id} />);
}

export async function getFollowRecommends() {
  const res = await fetch(`http://localhost:9090/api/followRecommends`, {
    next: {
      tags: ['users', 'followRecommends'],
    },
    cache: 'no-store',
  });
  ...
}

그런데 개발자도구 네트워크 탭에서는 밑에 사진과 같이

해당 API가 다시 요청되는것을 확인할 수 있었습니다.

fresh라 할지라도 API 요청은 항상 이루어지며 데이터만 캐시된 것을 ?? 가져오는 것인지 궁금합니다.

감사합니다.