[ Next.js ] 클라이언트 라우터 캐시와 레이아웃 최적화 원리

Next.js는 사용자 경험을 향상시키기 위해 다양한 최적화 전략을 제공합니다.

그중 하나가 클라이언트 라우터 캐시(Client Router Cache)입니다.

이번 포스트에서는 이 기능이 어떻게 동작하고, 어떤 상황에서 성능 향상에 기여하는지 살펴보겠습니다.

 

 

---

📍 클라이언트 라우터 캐시란?

클라이언트 라우터 캐시는 브라우저 측에서 페이지 전환에 필요한 일부 데이터를 캐싱하여, 동일한 데이터를 반복해서 서버에 요청하지 않도록 하는 기능입니다. 이를 통해 페이지 전환 시 성능을 개선하고, 중복된 데이터 요청을 줄일 수 있습니다.

 

 

---

🔄 예시 시나리오

• 사용자가 / (홈) 페이지에서 /search 페이지로 이동한다고 가정해봅시다.
• 이 두 페이지는 RootLayout, SearchbarLayout 같은 공통 레이아웃 컴포넌트를 공유합니다.

하지만 문제는, 이러한 공통 레이아웃들이 페이지 이동 시 서버에서 다시 요청되고, 브라우저에 중복 전달된다는 점입니다.

 

 

---

📦 Next.js의 응답 구조

Next.js 서버는 사용자의 요청에 대해 다음과 같은 리소스를 전달합니다.

1. 사전 렌더링된 HTML
2. 클라이언트 컴포넌트가 포함된 JS 번들
3. 서버 컴포넌트의 데이터가 담긴 RSC Payload

 

RSC Payload에는 현재 페이지에 필요한 모든 서버 컴포넌트가 포함됩니다.

예를 들어 /search 페이지 요청 시,

• RootLayout
• SearchbarLayout
• search 페이지 컴포넌트
• 그 외 필요한 서버 컴포넌트

이 모두가 RSC Payload에 담겨 전달됩니다. 문제는 RootLayout과 SearchbarLayout 같은 공통 컴포넌트가 매 페이지 전환마다 중복 요청된다는 점입니다.

 

 

---

💡 클라이언트 라우터 캐시의 해결 방식

Next.js는 이런 비효율을 개선하기 위해 공통 레이아웃 컴포넌트를 브라우저의 클라이언트 라우터 캐시에 저장합니다.

 

 

이후 다른 페이지로 이동할 때에는,

• 공통 레이아웃은 캐시에서 재사용
• 변경된 페이지 및 기타 컴포넌트만 서버에서 새로 요청

즉, 브라우저는 이미 가지고 있는 레이아웃 컴포넌트를 다시 요청하지 않으므로 네트워크 낭비가 줄어들고 성능도 향상됩니다.

 

 

---

🧪 실습 예제

// app/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>
  );
}

위 코드에서 Date객체의 toLocaleString() 메서드를 통해 레이아웃이 렌더링된 시점을 표시해보았습니다.

 

 

 

• 인덱스 페이지(~/)에서 시간이 예: 2:09:52 PM로 표시되었다면,

 

• /search 페이지로 이동해도 동일한 시간이 유지됩니다.

이는 RootLayout과 SearchbarLayout이 클라이언트 라우터 캐시에 의해 재사용되고, 새로 렌더링되지 않기 때문입니다.

 

 

---

🔁 새로고침 시에는?

 

클라이언트 라우터 캐시는 브라우저 세션 동안에만 유효합니다. 따라서:

• 페이지 이동: 캐시된 레이아웃 재사용 ✅
• 새로고침 또는 탭을 닫았다가 다시 열 경우: 캐시 초기화 ❌

새로고침하면 레이아웃이 다시 렌더링되며, 시간도 갱신되는 것을 확인할 수 있습니다.