Next.js 캐싱

Next.js가 성능 최적화를 위해 제공하는 요청 메모이제이션·데이터 캐시·풀 라우트 캐시·클라이언트 라우터 캐시 네 가지 캐싱 계층입니다.

네 가지 캐싱 계층

캐시	위치	목적
요청 메모이제이션	서버	하나의 렌더링 트리 내에서 동일한 요청의 중복 발생 방지
데이터 캐시	서버	`fetch()` 응답을 캐싱해 네트워크 요청 자체를 재사용
풀 라우트 캐시	서버	렌더링된 페이지(HTML, 서버 컴포넌트 Payload)를 캐싱
클라이언트 라우터 캐시	브라우저	공통 요소(레이아웃·로딩 상태)의 RSC Payload를 캐싱

요청 메모이제이션(Request Memoization)

동일한 URL·옵션의 fetch 요청이 한 페이지 렌더링 도중 여러 번 발생해도, 서버는 최초 요청의 응답을 재사용해 중복 요청을 방지합니다.

데이터 캐시(Data Cache)

네트워크 요청에 대한 응답을 Next.js 서버에 캐싱합니다. fetch() 옵션으로 동작을 제어합니다.

{ cache: 'force-cache' }: 캐싱을 적용
revalidate 옵션: 캐싱을 적용하되 일정 주기로 갱신
{ cache: 'no-store' }: 캐싱 없이 항상 새 데이터를 조회

풀 라우트 캐시(Full Route Cache)

서버에서 미리 생성된 페이지를 저장해두고, 동일한 요청이 들어오면 캐싱된 페이지를 즉시 제공합니다. cookies(), headers() 같은 Dynamic Function을 쓰지 않고 Route Segment Config도 동적 옵션으로 설정하지 않은 채 데이터 캐시가 적용되면 활성화됩니다. fetch()에 revalidate 옵션을 주면 일정 주기로 페이지가 갱신되는 ISR 방식으로 동작합니다.

클라이언트 라우터 캐시(Client Router Cache)

레이아웃·로딩 상태처럼 공통으로 쓰이는 요소의 RSC Payload를 브라우저에 캐싱합니다. 페이지 전환 시 캐싱된 데이터를 활용해 빠른 탐색이 가능하고, 서버 부하도 줄어듭니다.

핵심 정리

Next.js는 서버 단계(요청 메모이제이션, 데이터 캐시, 풀 라우트 캐시)와 클라이언트 단계(클라이언트 라우터 캐시)로 나누어 캐싱하며, fetch 옵션과 라우트 설정으로 각 계층의 캐싱 여부와 갱신 주기를 세밀하게 제어할 수 있습니다.