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 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!

RWB · Answer

A1. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요??아뇨 하나의 페이지를 렌더링하는 과정에서 일시적으로만 유효한 캐싱입니다.Next.js의 경우, SSR을 렌더링하는 과정에서 같은 API를 여러번 호출하는 경우가 발생합니다. 특히 Metadata과 페이지 컨텐츠를 각각 구현하려면, 메서드가 다르기 때문에 동일한 API를 여러번 호출하는 경우가 생기게 됩니다.Request Memoization은 이러한 렌더링 상황에서 일시적인 캐싱을 지원해줍니다.이러한 목적과 구조 탓에, 페이지 렌더링이 끝나느 즉시 invalidate 처리됩니다.타 페이지에서 이를 구현하려면 React의 cache 같은 API 자체에 적용되는 캐싱이 필요합니다.(백엔드 캐싱은 별도로 언급하지 않겠습니다.)A2. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?아뇨, "정확히 동일한 요청"이어야 합니다.요청에는 단순 엔드포인트 뿐만 아니라, HTTP Method, Cookie와 같은 각종 헤더는 물론, Query Parameter나 Body 객체가 포함되어 있습니다.이러한 요청의 다양성을 무시하고 엔드포인트만으로 캐싱을 하는 건 안 하느니만 못 한 정책입니다.따라서 모든 요소가 정확히 동일한 요청만 캐싱됩니다.단, 요청 시마다 달라지는 응답은 캐싱 대상이 아닙니다.요청이 완전히 동일하다고 가정할 때, 엔드포인트의 응답이 매번 달라지게 될 경우, 이러한 성격의 API는 캐싱해서는 안 됩니다.예를 들면 /token 이라는 API 호출 시, 호출 기준 코인의 시세를 불러오는 API가 있다고 가정해봅니다.이걸 캐싱해버리면 캐싱된 순간의 시세만을 invalidate 되는 순간까지 반환하게 되어, 아무런 의미가 없어집니다.A3. react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요?네, 그럴 "수도" 있습니다. React.cache가 어떤 스코프를 갖고 있냐에 따라 다릅니다.구현하기 나름이지만, 별도의 로직 구축이 아닌 단순 사용만으로 Request Memo의 효과를 온전히 기대하긴 어렵습니다.

ExpoProvider · Answer

1.Memoization 은, reuqest id 를 기준으로 관리됩니다. /dashboard, /home 어디에서 호출하던지, 동일한 request_id 를 사용한다면 디폴트로 캐시됩니다. 이 알고리즘은 1차적으로 tanstack, next 모두 같습니다. tanstack 에서 query_id 를 관리하듯, 여기서도 마찬가지입니다.2.no need. it's enough.3.NextJS 는, 'Fetch' 라이브러리를 오버라이드 합니다. 이제 가장 큰 특성이고 기억해야 할 문제인데, NextJS 바깥의 fetch 와 NextJS 내부에서의 fetch 가 다른 것임을 인지해야 합니다. 프레임웍 내에서 fetch 의 캐시를 컨트롤하겠다는 의지였던 것 같은데요, 아직은 이 시도가 시장에서 성공 또는 실패의 판정을 받기 이전인 것 같습니다. 그리고 분명한 건, NextJS 가 axios 를 cache 하고있지는 않습니다. 또한 cache 를 바탕으로 NextJS 의 .middleware 등의 아키텍쳐가 올려져 있기 때문에, axios 는 NextJS 의 기본 컨셉에 맞지 않습니다. NextJS 에서는 fetch cache 를 명시적으로 표현해야 한다는 "use cache" 가 NextJS 15 에서 제기되었습니다.

컴포지트 · Answer

ㅋㅋㅋㅋㅋ 나 참... 위 AI 답변 무시하시고, 제가 경험자니 답변드리죠.기본적으로 같은 페이지 한정입니다. 이게 싫으면 revalidate 옵션이나 next.tag 옵션으로 원하는 태그로 캐시 한정지을 수 있습니다. 공식 메뉴얼 보세요. https://nextjs.org/docs/app/api-reference/functions/fetch캐시 범위는 URL 까지이고 GET 한정입니다. POST 메소드에 JSON이나 업로드 같은 요청 본문 넣었을 경우 적용 안됩니다.일단 react의 캐시 기능과 Next.js 대한 이해가 필요한데, cache 는 react가 제공하는 로우레벨 API이고, fetch 는 원래 웹표준 함수를 Next.js 입맛대로 꾸민 하이레벨 API 입니다. 리액트의 캐시 존재 이유는 컴포넌트 내 같은 로직에 대한 중복 호출 방지에 목적이 있고, Next.js 캐시의 목적은 react 캐시 + 요청 단위 캐시까지 포함됩니다. 따라서 어디까지 캐시하고 싶은지 명확한 이해가 필요하고, 간단하게 정리하면, 컴포넌트의 중복 호출만 막으면 땡이다? cache 함수, 요청 단위 캐시가 필요하다면 fetch나 'use cache' 등의 Next.js 제공 캐시 기능을 사용하면 됩니다. 백엔드 지식 없으면 꽤나 어려운 과정입니다. 백엔드 캐시 또한 중요하거든요.

next Request Memoization과 react cache

3개의 답변

#reactjs 목록