인프런 커뮤니티 질문&답변
작성한 질문수
next Request Memoization과 react cache
작성
·
33
0
next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다.
Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요??
예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.
만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?
axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요?
감사합니다!!
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다. 변재정님.
Next.js에서 제공하는 Request Memoization 기능과 관련하여 궁금증을 풀어드리겠습니다.
1. Request Memoization 기능의 적용 범위
Request Memoization 기능은 기본적으로 요청의 URL (엔드포인트)에 의해 작동합니다. 따라서, 동일한 URL 요청을 한 서버 사이클 안에서 하나로 묶어주는 것입니다. 각 페이지(/dashboard, /home)에서 동일한 엔드포인트로의 요청이 이루어진다면 해당 요청들은 개별적으로 처리되지 않고 캐싱되는 것입니다. 하지만, 페이지마다 새로운 서버 사이클이기 때문에 페이지 전환 시에는 초기화되어 다시 요청될 수 있습니다.
요청 메모화와 데이터 캐시에 대해에서 유사한 주제로 다룬 질문을 확인하시면 더 깊은 이해에 도움이 될 것입니다.
2. 파라미터에 따른 Request Memoization 적용 여부
Request Memoization은 요청의 URL뿐 아니라, 요청의 전체 컨텍스트 (HTTP 메서드, 헤더, 파라미터 등)까지 고려합니다. 따라서, 동일한 엔드포인트여도 파라미터가 다르면 다른 요청으로 취급되어 Request Memoization이 적용되지 않습니다.
3. axios와 react의 cache 함수
Axios는 Next.js와는 독립적으로 작동하며, Next.js의 Request Memoization 기능은 미들웨어 레벨에서 이루어지기 때문에 axios에서는 직접 활용하기 어렵습니다. 대신 React Query와 같은 라이브러리를 사용하면 클라이언트 사이드에서 캐시 및 데이터 페칭 관리를 좀 더 세부적으로 할 수 있습니다. React에서 제공하는 cache 기능을 사용하면 간단한 캐싱 전략을 수립할 수 있지만, axios의 경우 단순한 캐싱이라면 추가적인 작업이 필요할 수 있습니다.
이와 관련하여 useQuery + fetch에 대해 메모이제이션 내용을 참고하시면 axios와 관련된 유용한 정보를 얻으실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
그렇군요 답변 감사합니다!!