Page Caching [Full Route Cache, Router Cache ]

Page Caching

NextJS 캐싱 중 페이지와 관련된 캐싱을 알아보겠습니다.

NextJS의 페이지 캐시는 Full Route Cache와 Router Cache가 있습니다. (data, request 관련 캐시는 다음에 다루도록 하겠습니다.)

Full Route Cache와 Router Cache는 한마디로 말하자면, 서버에서 캐싱과, 클라이언트에서의 캐싱입니다.

즉, Full Route Cache는 서버에서 렌더링 된 페이지를 캐싱해 두는 것이고, Router Cache는 클라이언트가 서버에서 받은 페이지를 캐싱하는 것입니다. 정확히는 ReactServerCompontPayload를 캐싱하는 것이지만 편하게 페이지라 부르겠습니다.

Full Route Cache

NextJS를 빌드를 하고 나면 페이지 별, static인지 dynamic인지 알려줍니다. 아래와 그림과 같이

여기서 O는 static을 나타내고, λ는 dynamic을 나타내고 있습니다.

 

빌드 결과

 

NextJS는 static인 페이지들을 캐싱해 둡니다. 즉 여러 사용자들이 static 페이지를 요청하면 매 요청마다 새로 페이지를 만드는 것이 아니라 캐싱되어 있는 페이지를 보여줍니다. 하지만 dynamic 페이지들은 캐싱이 되지 않아 매 요청마다 새로 렌더링 하여 사용자에게 보여줍니다.

이 캐싱을 무효화시키려면 대표적인 방법이 3가지가 있습니다.

1. dynamic function 사용: cookies, headers, searchParams 같은 페이지 Props를 사용하면 dynamic 렌더링이 되어 캐싱이 되지 않습니다.
2. 페이지 상단 dynamic = ‘force-dynamic’ or revalidate = 0을 명시: 이와 같이 페이지 상단에 명시하면 페이지는 dynamic 렌더링이 되어 캐싱되지 않습니다.
3. Data Cache: fetch 옵션 중 cache를 ‘no-store’로 지정하거나 revalidatePath를 사용하여 경로를 명시하면 캐싱이 무효화됩니다.

아래 이미지는 static, dynamic 페이지의 캐싱 과정입니다. Router Cache 부분은 가렸습니다.

그림만 보셔도 이해가 가능할 것입니다.

 

Full Route Cache

 

Router Cache

Router Cache는 클라이언트의 memory안에 캐싱이 됩니다. 즉 한번 방문한 페이지는 클라이언트에 캐싱이 되어 즉시 렌더링이 됩니다. (서버요청 없이) 아래는 Router Cache 흐름도 사진입니다.

 

Router Cache

 

Router Cache에 의해 사용자는 즉시 페이지 이동이 가능하며 Full 렌더링이 없이 부분 적으로 다른 라우터를 렌더링을 할 수 있습니다. 또한 state를 페이지 이동 간에 공유가 가능하게 됩니다.

이제 Router Cache의 중요하게 되는 부분을 설명하겠습니다.

Duration

캐시 된 페이지들은 지속기간을 가지고 있습니다. 앞서 봤던 Full Route Cache가 무효화 없는 가정하에 영구적으로 캐싱을 하면, Router Cache는 기간을 가지고 있습니다.

statically 하게 렌더링 된 페이지는 5분이라는 지속시간을 가지고 있습니다. 즉 5분이 지나면 캐싱이 무효화 되고 서버에 요청하게 됩니다.

dynamically 하게 렌더링된 페이지는 30초라는 지속기간을 가지고 있습니다. 즉 30초가 지나면 서버에 요청하게 됩니다.

물론 이 Router cache도 무효화를 시킬 수 있습니다.

서버 액션에서 revalidatePath를 이용하거나 cookies를 지정/삭제로 캐싱을 무효화시킬 수 있습니다.

또한 router.refresh를 사용하여 현재 캐싱된 모든 페이지를 무효화 시킬 수 있습니다.

이 Router Cache와 middleware를 사용할 때 밀접하게 관련되어 있는데 다음 포스팅 때 작성하도록 하겠습니다.

(이것 때매 헤멤 진짜 이게 하이라이트 다음 편 기대하십쇼)

 

결론

Full Route Cache와 Router Cache는 한마디로 말하자면, 서버에서 캐싱과, 클라이언트에서의 캐싱입니다.

즉 Full Route Cache는 서버에서 렌더링 된 페이지를 캐싱해두는 것이고, Router Cache는 클라이언트가 서버에서 받은 페이지를 캐싱하는 것 입니다.