Next.JS caching(2) Full Route Cache와 Client-Side Router Cache

개요

캐싱 

2025.01.05 - [코딩/Flex프로젝트] - 재테크 블로그 프로젝트 (12) - 리팩토링 [Next.js caching ]

 

이전 글에서 Next의 캐싱 중 Request Memoization, DataCache에 대하여 다루어 보았다

 

Next.js Caching (latest ver.)

 

Next.js에선 여러가지 캐싱 방식을 제공하고, 각 캐싱 방식들은 다른 목적, 시기, 실행 위치가 다르다.

 

Next.js에서는 성능 향상과 비용 절감을 목적으로 선택 해제하지 않는 이상 가능한 많이 캐싱한다.

 

아래 사진은 빌드 시 그리고, 정적 경로가 처음 방문될 때의 동작을 보여준다.

 

캐싱 동작은 경로가 (정적,동적) 렌더링 방식과 데이터의 캐싱 여부와 초기 방문 혹은 후속 네비게이션에 따른 요청인지에 따라 달라진다.

 

이번엔 Full Route Cache와 Client-side Router Cache에 대해서 알아보려한다.

 

---

 

Full Route Cache 

 

NextJS는 빌드시 경로를 렌더링하고 캐싱한다 이 과정은 빌드마다 서버에서 렌더링하는 대신 캐시된 경로로 제공해 최적화를 진행함

 

1. React Rendering on the server

 

Next는 서버에서 React API를 사용해 개별 경로 세그먼트와 Suspense경계를 기준으로 청크를 나누어 렌더링을 조율함 

 

청크의 두 단계의 렌더링

1. React는 서버 컴포넌트를 스트리밍에 최적화된 React Server Component Payload로 렌더링함

• React Server Component Payload?
  • 렌더링된 RSC트리의 압축된 이진 표현으로 서버 컴포넌트 렌더링 결과, RCC로 전달된 모든 props등을 포함한다
  •  

2. NextJS는 React가 렌더링한 Payload와 클라이언트 컴포넌트 자바스크립트 명령을 사용해 서버에서 렌더링한다

 

 

2. Next.js Caching on the Server (Full Route Cache)

정적 렌더링된 경로의 렌더링 결과(RSC Payload와 HTML)를 서버에 캐시하고 빌드 시 정적으로 렌더링된 경로나 재검증 중에 적용된다

 

 

3. React Hydration and Reconciliation on the Client

요청 시 클라이언트에서는

 

1. HTML은 RSC RCC의 빠른 상호작용의 초기 미리보기를 보여주는데 사용된다

 

2. RSC Payload의 경우 클라이언트 및 렌더링된 서버컴포넌트 트리를 일치시키고 DOM을 업데이트하는데 사용됨

 

3. JS명령의 경우 클라이언트 컴포넌트를 hydrate하여 애플리케이션을 상호작용하게 만든다

 

 

4. Next.js Caching on the Client (Router Cache)

RSC Payload는 클라이언트 측 Router Cache에 저장되고 이는 개별 경로 세그먼트로 분할된 캐시로 Router Cache는 이전에 방문한 경로를 저장하고 미래의 경로를 prefetch해 탐색 경험을 향상시키는데 사용됨

 

 

 

5. Subsequent Navigations

후속 탐색 또는 prefetch중 RSC payload가 Router Cache에 저장된 경우 새요청을 보내는 것을 건너뜀

 

없을 경우 클라이언트의 Router Cache를 채움

 

Static and Dynamic Rendering

정적경로의 경우 기본적으로 캐싱이되나 동적경로는 캐시되지 않고 요청시 렌더링 됨

 

 

사진에서 보이듯이 FullRoute Cache를 skip하고 새롭게 요청해 렌더링하는 것을 볼 수 있다

 

항상 동적으로 렌더링 하고 싶은 경우라면?

서버 컴포넌트지만 매번 최신 데이터를 보여주거나 캐싱이 되면 안되는 경우엔 다음과 같은 옵션을 사용한다

 

1. Dynamic Function : Full Route Cache에서 경로를 옵트아웃하고 요청 시 동적으로 렌더링 한다 이 과정에서 지난 시간에 배운 DataCache는 여전히 사용이 가능하다

 

2. dynamic = 'force-dynamic' 또는 revalidate = 0 경로 세그먼트 구성 옵션 : Full Route Cache, Data Cache모두 건너 뛸 수 있는 방법

 

 

Client-side Router Cache

Next.js는 레이아웃, 로딩 상태 및 페이지로 나뉜 경로 세그먼트의 RSC 페이로드를 저장하는 클라이언트 측 라우터 캐시를 가지고있다

 

이는 페이지 탐색 시 데이터를 캐싱해 성능을 최적화하도록 한다

 

Next를 쓰다보면 방문한 경로나 컴포넌트에 주어진 경로를 이동할 때 빠르게 로드되는 것을 경험 할 수 있는데,

이는 NextJS가 방문한 경로세그먼트, 탐색할 가능성이 있는 경로를 prefetch하기에 가능한 것이고 이를 통해 탐색간 전체 페이지 리로드를 없애 React상태 및 브라우저 상태를 유지하는 것이다

 

Router캐시를 사용하면

 

레이아웃, 로딩상태는 캐시되고 탐색시 재사용된다

페이지의 경우 기본적으로 캐시되지 않으나 브라우저의 앞뒤 탐색엔 재사용된다

 

Next15 부터는 fetch요청과 클라이언트 사이드 캐싱이 기본적으로 비활성화되기에 앞으로는 no-store속성이아닌 cache: "force-cache" 를 종종 명시할 일이 있지 않을까싶다

 

마무리는 각 next api 별 캐싱이 어떻게 적용되는지에 대한 표

 

https://nextjs.org/docs/app/building-your-application/caching

 

https://nextjs-ko.org/docs/app/building-your-application/caching#full-route-cache

Caching in Next.js – Nextjs 한글 문서