next Request Memoization과 react cache

Question

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!

Boaz · Answer

안녕하세요. 먼저 깊이 있는 질문 주셔서 감사합니다. 🤗 바로 답변 드릴게요. 적용 범위 Request Memoization은 한 번의 서버 요청(=한 번의 React 트리 렌더링) 동안만 유효합니다. 같은 트리(레이아웃·페이지·서버 컴포넌트들) 안에서 같은 fetch (동일 URL+옵션)를 여러 번 호출해도 1번만 나갑니다. 하지만 /dashboard 와 /home 처럼 서로 다른 페이지 요청은 각각 별도 요청이므로 서로 공유되지 않습니다 . 또한 React 컴포넌트 트리 밖(예: Route Handler)에는 적용되지 않습니다. 참고 - Next.js 파라미터가 다르면? 아니요. 메모이제이션 키는 **URL + fetch 옵션(메서드/헤더/바디 등)**이 동일할 때만 일치합니다. 쿼리 스트링이나 헤더가 달라지면 다른 요청으로 간주되어 중복 제거되지 않습니다 . 추가로 메모이제이션은 GET만 대상입니다. 참고 - Next.js axios를 쓰면? 대안은 react 의 cache Next의 Request Memoization은 패치된 fetch 에 붙는 최적화라서 axios에는 자동 적용되지 않습니다 . 말씀하신대로 axios(또는 ORM/DB 클라이언트)를 써야 한다면, 해당 호출 함수를 react 의 cache 로 감싸면 비슷하게 “한 요청 내 중복 호출”을 최적화할 수 있습니다 참고 - Next.js