next Request Memoization과 re... - Inflearn

Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"

Why should Data fetching be done on the server?

next Request Memoization과 react cache

Written on

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다.

Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요??
예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.
만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?
axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요?

감사합니다!!

reacttypescriptnext.js

Answer 1

Instructor

안녕하세요. 먼저 깊이 있는 질문 주셔서 감사합니다.🤗

바로 답변 드릴게요.

적용 범위
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

Questioner

그렇군요. 정성스러운 답변 감사합니다!!