Router Cache와 Request Memoization을 통한 Next.js 렌더링 최적화

Router cache and request memoization

Peter Jacxsens2026년 4월 16일11분intermediate

AI 요약

Context

페이지 간 이동 시 매번 서버 요청이 발생하는 오버헤드와 단일 요청 주기 내 중복 데이터 fetch로 인한 성능 저하 문제 발생. 특히 복잡한 컴포넌트 트리 구조에서 동일 데이터에 대한 중복 접근을 효율적으로 제어할 필요성 증대.

Technical Solution

Browser Memory 기반의 Router Cache를 구축하여 RSC Payload를 저장함으로써 즉각적인 페이지 내비게이션 구현
Route Segments를 Layout, Loading, Page로 분리하고 Layout과 Loading 상태를 부분적으로 캐싱하는 Partial Rendering 전략 채택
Prefetching 설정(null vs true)에 따라 Static 페이지 5분, Dynamic 페이지 최대 5분까지의 자동 Invalidation 주기 차등 적용
Request Cycle 동안 동일한 URL과 Option을 가진 fetch 요청을 메모리에 저장하는 Request Memoization 도입으로 서버 부하 감소
fetch API 외의 DB 쿼리나 무거운 연산 함수를 위해 React cache 함수를 이용한 수동 Memoization 레이어 제공
Request Memoization 우선 확인 후 Data Cache로 이어지는 계층적 캐싱 전략을 통한 데이터 조회 경로 최적화

실천 포인트

- 동일 페이지 내 다수 컴포넌트에서 동일 데이터 필요 시 Prop Drilling 대신 Request Memoization 활용 검토 - 빠른 사용자 경험을 위해 Link 컴포넌트의 prefetch 옵션을 통해 Router Cache 전략 최적화 - Server Action 내 revalidatePath 또는 revalidateTag를 호출하여 Router Cache의 정합성 유지 - fetch 외의 비동기 작업은 React cache로 래핑하여 단일 요청 주기 내 중복 실행 방지

태그

#RSC Payload #Request Memoization #Partial Rendering #Router Cache #Invalidation

원문 읽기