리퀘스트 메모이제이션을 끄려면?

Question

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요 강의 듣다가 궁금해진게 리퀘스트 메모이제이션이 자동으로 작동하는데 특정 요청만 끄려면 어떻게 해야 하나요? 예제 프로젝트에서 추천 도서를 랜덤으로 가져오는데 동일 컴포넌트를 여러개 호출 해보니 메모이제이션이 작동해서 모두 똑같이 나오더라고요 일반적이진 않지만 이런 랜덤성(?)있는 데이터는 메모이제이션을 적용하고 싶지 않을 수도 있을 것 같은데 이런 경우는 어떻게 하나요

이정환 Winterlood · Answer

안녕하세요 이정환입니다.

Request Memoization 기능을 해제하시려면 아래와 같이 AbortController 라는 API를 사용하셔야 합니다. 이는 Next.js 공식문서에 탑재되어 있는 내용으로 링크를 걸어드리도록 하겠습니다 😃

https://nextjs.org/docs/app/building-your-application/caching#opting-out

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. cwnsgur13579님.

리퀘스트 메모이제이션은 데이터를 캐싱하여 동일한 요청에 대해 서버와의 왕복을 줄이는 유용한 방법입니다. 그러나 랜덤 데이터와 관련된 요청처럼 매번 다른 결과를 필요로 하는 경우, 이러한 캐싱을 비활성화해야 할 수 있습니다.

특정 요청에서 메모이제이션을 끄기 위해서는 Next.js에서 제공하는 getServerSideProps, getStaticProps, 또는 API 라우트의 fetch 요청 시에 해당 요청의 캐싱 옵션을 조정하여 관리할 수 있습니다.

캐싱을 비활성화하는 방법:
1. Revalidate 설정: getStaticProps 에서 revalidate 값을 설정하여 캐시 갱신 주기를 조정할 수 있습니다. 랜덤 데이터를 즉시 반영하려면 revalidate를 빈번하게 설정하거나 false를 사용하는 방식을 고려합니다.

No-Cache 헤더 사용: Fetch 요청 시 HTTP 헤더에 Cache-Control 옵션을 설정하여 캐싱 동작을 조정할 수 있습니다. 예를 들어:
```
fetch('/api/random-data', {
   headers: {
       'Cache-Control': 'no-store'
   }
})
```

기존에 유사한 질문이 다루어진 게시글에서도 이 문제에 대한 논의가 이루어져 있습니다. 도움이 될 수 있는 게시물을 추천드립니다:
- next 에러 로그 관련 질문: 여기에서 캐싱 문제와 API 호출에 관한 논의가 진행됩니다.

이 방법을 사용하여 랜덤 데이터 요청 시 캐싱을 비활성화하고자 하는 경우, 요청이 각 호출마다 새 데이터를 제공하게 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

리퀘스트 메모이제이션을 끄려면?