인프런 커뮤니티 질문&답변
작성한 질문수
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
작성
·
14
·
수정됨
0
// A await fetch('https://api.example.com/user/1', { cache: 'force-cache', })
// B await fetch('https://api.example.com/user/1', { cache: 'no-store', })
app router에선 컴포넌트마다 api요청을 보내서 중복 요청이 발생하게 됩니다.
이때 캐싱옵션을 사용할 경우 전부 통일을 해줘야 작동하게 되나요?
gpt 답변
이런 상황에서 메모이제이션이 되지 않고 두개를 별개의 api요청으로 봅니다.
위 상황에서는 “캐시”도 하나로 합쳐서 동작하지 않고, 각 fetch가 자기 옵션대로 따로 동작합니다.
같은 의문을 품으시는 분이 있을까 해서 남겨봤습니다
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 성진님.
Next.js에서 동일한 API를 다른 캐시 옵션으로 요청할 때의 동작 방식에 대해 질문을 주셨군요. 다음과 같은 상황을 살펴보겠습니다:
API 요청의 캐시 옵션
fetch A:
cache: 'force-cache'를 사용하는 경우, 이전의 저장된(캐시된) 데이터를 우선적으로 가져올 수 있습니다. 이는 캐싱된 데이터를 최대한 활용하고 새 데이터를 가져오는 빈도를 줄이는 방식입니다.fetch B:
cache: 'no-store'를 사용하는 경우, 요청마다 새롭게 데이터를 가져옵니다. 이는 데이터의 최신성을 유지하기 위한 옵션으로, 매번 서버에 요청을 보내어 최신 데이터를 가져옵니다.
중복 요청 시 동작
Next.js의
fetch는 동일한 URL이어도 캐시 옵션이 다르면 서로 다른 요청으로 처리합니다. 따라서 위의 두 요청은 각각 별개의 요청으로 간주되어 각 캐시 옵션대로 동작하게 됩니다.이는 메모이제이션이 되지 않으며, 각기 옵션에 따라 별도로 데이터를 처리하고 가져옵니다.
참고 자료
동일한 주제를 다룬 기존 질문과 답변을 통해 더 많은 정보를 얻을 수 있습니다:
[섹션 6. 페이지 캐싱 - 동일한 fetch 요청을 다른 cache 옵션으로 데이터 패칭 하는 경우]: 여러 캐시 옵션을 사용할 때의 요청 처리에 관한 논의입니다.
[풀 라우트 캐시1 질문]: Dynamic vs Static 페이지 처리와 관련된 캐싱 전략에 대한 설명입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.