개념 설명
클라이언트 사이드 렌더링(CSR) 환경에서 페이지 이동 시 발생하는 데이터를 메모리에 일시적으로 보관하는 메커니즘을 의미.
브라우저가 매번 서버에 전체 페이지나 데이터를 요청하는 대신, 이전에 방문했던 경로의 정보를 보관하여 즉각적인 화면 전환을 제공하는 기술임.
Next.js의 App Router나 React Router 같은 현대적인 라이브러리에서 사용자 경험(UX) 향상을 위해 필수적으로 활용되는 기능.
사용 상황 예시
- 뒤로 가기/앞으로 가기: 사용자가 이전 페이지로 돌아갈 때 서버 요청 없이 즉시 화면을 렌더링하여 매끄러운 경험 제공
- 반복적인 메뉴 이동: 메인 페이지와 상세 페이지를 자주 오가는 커머스 사이트에서 불필요한 네트워크 트래픽 감소 및 빠른 응답 속도 확보
- 사전 로딩(Prefetching): 사용자가 링크 위로 마우스를 올리거나 화면에 보일 때 미리 데이터를 캐싱하여 클릭 시 로딩 시간 제로화 구현
기본 문법 및 설정 (Next.js 기준 예시)
Next.js의 경우 별도의 복잡한 설정 없이도 기본적으로 동작하지만, 캐시 제어를 위해 다음과 같은 접근 방식을 사용.
- Link 컴포넌트 활용:
prefetch속성을 통해 캐싱 여부 결정
// 기본적으로 prefetch는 true로 설정됨
<Link href="/dashboard" prefetch={true}>대시보드로 이동</Link>- 캐시 무효화(Invalidation):
router.refresh()를 사용하여 현재 경로의 캐시를 강제로 새로고침
const router = useRouter();
// 데이터 업데이트 후 호출하여 캐시 갱신 유도
router.refresh();자주 하는 실수
- 데이터 최신성 간과: 캐시된 데이터가 서버의 실제 데이터와 일치하지 않아 사용자에게 오래된 정보를 보여주는 경우 발생. 적절한 유효 시간(Stale Time) 설정이나 수동 갱신 로직 누락이 주된 원인.
- 과도한 메모리 사용: 모든 페이지 데이터를 무분별하게 캐싱할 경우 브라우저 메모리 점유율이 높아져 전체적인 앱 성능 저하 초래.
- 서버 사이드 상태와의 혼동: 클라이언트 캐시는 브라우저 메모리에 존재하므로, 페이지 전체를 새로고침(F5)하면 초기화된다는 점을 인지하지 못하는 실수 빈번.
핵심 요약
- 사용자 경험 개선: 페이지 전환 속도를 획기적으로 높여 매끄러운 인터페이스 제공.
- 네트워크 자원 절약: 불필요한 서버 호출을 줄여 트래픽 비용 및 서버 부하 감소.
- 유효성 관리 필수: 캐시 데이터의 신선도를 유지하기 위한 적절한 무효화 전략 병행 필요.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
