리퀘스트 메모이제이션

정호성·2025년 3월 1일

Next.js

목록 보기
12/18
post-thumbnail

Requst Memoization?

리퀘스트 메모이제이션은 데이터 캐시와 함께 데이터 패칭을 최적화해주는 기능이다.
하나의 페이지 안에 여러 개의 컴포넌트에서 발생하는 동일한 URL을 가진 API요청에 대해 캐싱하여 불필요한 네트워크 요청을 줄이는 기법이다.


동작 과정


1. 클라이언트가 Next.js 서버에 요청을 보낼 때, 서버는 먼저 캐시를 확인한다.
2. 캐시가 없으면(MISS), API를 호출하여 데이터를 가져오고 이를 캐시에 저장(SET) 한다.
3. 이후 동일한 요청이 발생하면, 캐시에서 데이터를 반환(HIT) 하여 API 호출을 건너뛴다(SKIP).

리퀘스트 메모이제이션은 하나의 페이지를 렌더링 하는 동안에 중복된 API 요청을 캐싱하기 위해 존재함
렌더링이 종료되면 모든 캐시가 소멸한다.


리퀘스트 메모이제이션 vs 데이터 캐시 차이점

구분리퀘스트 메모이제이션데이터 캐시
캐싱 위치요청 단위에서 캐싱 (예: 같은 요청이 반복될 때 캐시 활용)데이터 자체를 저장소(Redis, CDN 등)에 캐싱
목적동일한 요청이 같은 실행 컨텍스트(서버, 함수 내)에서 반복될 때 불필요한 API 호출 방지여러 요청에서 동일한 데이터를 빠르게 제공하여 네트워크 부하 감소
범위특정 요청(HTTP Fetch) 수준에서만 적용전체 애플리케이션 수준에서 관리됨
유효 기간일반적으로 요청 컨텍스트 내에서만 유지TTL(Time-To-Live) 설정 가능, 장기 저장 가능
예제Next.js 내부에서 동일한 fetch 요청이 여러 번 호출될 경우 캐싱하여 API 호출을 줄임Redis, CDN, 브라우저 캐시를 활용하여 데이터 응답 속도 향상

요약

  • 리퀘스트 메모이제이션은 요청(request) 단위에서 동일한 API 호출을 줄이는 최적화 방식.
  • 데이터 캐시는 요청과 무관하게 특정 데이터를 저장하여 여러 요청에서 재사용하는 방식.
profile
👨🏻‍💻 Front-End Developer

0개의 댓글