클라이언트 라우터 캐시

클라이언트 라우터 캐시

페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터(레이아웃)를 보관하는 캐시

• 브라우저에 저장됨

 

기존 방식의 문제점

여러 개의 페이지가 공통된 레이아웃을 사용하는 경우

• 중복된 데이터(RSC Payload)를 여러 차례 전달받아야 함
• ex) index 페이지에서 search 페이지로 이동할 때 layout.tsx를 여러번 전달받음

• 이러한 문제점(데이터 중복 호출로 인한 비효율)을 해결하기 위한 새로운 캐시 공간: 클라이언트 라우터 캐시

 

클라이언트 라우터 캐시의 역할

• 레이아웃에 해당하는 데이터만 클라이언트 라우터 캐시에 보관했다가 다른 페이지에서도 그대로 사용
• 이 외 페이지 및 기타 데이터는 따로 전달 받음
• 단, 새로고침 시 사라짐

 

정리

클라이언트 라우터 캐시는 접속한 페이지의 레이아웃만 따로 보관함으로써 나중에 페이지 이동이 발생했을 때 공통된 레이아웃을 서버로부터 중복으로 불러오지 않도록 하는 공간임

 

코드 실습

빠른 확인을 위해 npm run dev로 시작

 

클라이언트 캐시 확인해보기

index 페이지와 search 페이지에서 레이아웃을 중복으로 불러오지 않는 것을 확인하기

• index 페이지와 search 페이지의 공통 레이아웃 컴포넌트에 다음과 같이 페이지 요청 시 현재 시각을 출력함
• index 페이지에 접속 후 서치바를 사용해 search 페이지로 라우팅하기 (주소창 입력 X)

// (with-searchbar)/layout.tsx
...
export default function Layout({ children }: { children: ReactNode }) {
    return (
        <div>
            <div>{new Date().toLocaleString()}</div>
            <Suspense fallback={<div>Loading</div>}>
                <Searchbar />
            </Suspense>
            {children}
        </div>
    );
}

• 결과: 최초 접속 시 시간과 search 페이지 이동 후 시간이 동일함
  • 새로고침 시에는 클라이언트 캐시도 사라지므로 시간이 변함