중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화

Question

// 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 가 자기 옵션대로 따로 동작 합니다. 같은 의문을 품으시는 분이 있을까 해서 남겨봤습니다

이정환 Winterlood · Answer

안녕하세요 이정환입니다. 네 이럴때에는 캐싱 옵션을 통일해 주셔야 합니다. Next.js에서는 API 주소, 캐시 옵션, 쿼리 스트링, URL 파라미터 모두를 합쳐서 동일할 경우에만 같은 데이터 요청으로 인식하게 됩니다. 따라서 질문에 작성해주신 것 처럼 캐시 옵션이 다를 경우 두 요청은 하나로 합쳐지지 않습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 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 페이지 처리와 관련된 캐싱 전략에 대한 설명입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.