데이터 캐시와 리퀘스트 메모이제이션

Data Cache

기본 사용법

fetch 함수의 두 번째 인수로 객체를 전달하여 캐시 설정을 저장할 수 있다.

기본적으로는 캐시되지 않는 요청으로 동작한다. (auto no-cache)

const response = await fetch('url', { 캐싱 설정 });

주의 사항
이 캐싱 옵션들은 Next.js의 fetch 구현에서만 사용 가능하다.
Axios 등 다른 HTTP 요청 라이브러리에서는 이 옵션들을 직접 사용할 수 없다.

 

캐싱 옵션

cache: 'no-store'

데이터 페칭의 결과를 저장하지 않는다.

const response = await fetch('url', { cache: 'no-store' });

• 실시간 데이터가 필요한 경우 (주식 시제, 실시간 채팅)

cache: 'force-cache'

요청된 결과를 무조건 캐싱한다. 한 번 호출된 이후에는 다시 호출되지 않는다.

const response = await fetch('url', { cache: 'force-cache' });

• 자주 변경되지 않는 정적 데이터 (블로그 포스트, 제품 정보)

next: { revalidate: 시간 }

특정 시간을 주기로 캐시를 업데이트 한다. 페이지 라우터의 ISR 방식과 유사하다.

const response = await fetch('url', { next: { revalidate: 시간 } });

• 주기적으로 업데이트 되는 데이터 (일일 날씨 정보, 주간 랭킹)

next: { tags: ['태그명'] }

On-Demand Revalidate를 위한 설정. 요청이 들어왔을 때 데이터를 최신화한다.

const response = await fetch('url', { next: { tags: ['태그명'] } });

• 관리자 패널에서 데이터 업데이트 시 캐시 무효화

 

데이터 캐시는 백엔드 서버로부터 불러온 데이터를 거의 영구적으로 보관하기 위해 사용되며, 서버 가동 중에는 영구적으로 보관된다.

 

Request Memoization

Next.js에서 제공하는 자동 최적화 기능으로, 하나의 페이지를 서버 측에서 렌더링하는 과정에서 발생하는 중복 API 요청을 최소화한다.

특징

1. 단일 렌더링 주기 내 최적화: 하나의 페이지 렌더링 동안 발생하는 중복 요청을 캐싱
2. 자동 최적화: 개발자의 추가적인 설정 없이 자동으로 동작
3. 임시 캐싱: 렌더링이 종료되면 모든 캐시가 소멸됨
4. 데이터 일관성: 동일한 요청에 대해 항상 같은 데이터를 반환하여 일관성을 유지

 

작동 방식

페이지 렌더링 시작 -> 컴포넌트에서 API 요청 발생 -> 요청 URL을 키로 사용하여 메모이제이션 -> 동일한 URL로 추가 요청 발생 시, 캐시된 결과 반환 -> 페이지 렌더링 완료 후 메모이제이션된 데이터 삭제

 

데이터 캐시와의 차이점

특성	Request Memoization	Data Cache
지속 시간	단일 렌더링 주기	서버 재시작까지 또는 설정된 시간
목적	중복 요청 방지	장기적 데이터 저장
범위	페이지 단위	전체 애플리케이션
설정	자동	수동 설정 필요