4가지의 캐싱 메커니즘

1. Request Memoization

서버에 데이터 요청중에 또다른 같은 요청이 들어오면 무시하고 하나만 실행되게 해준다.

1. Data Cache

빌트인 데이터 캐시로서 서버 요청 및 배포 전반에 걸쳐 데이터 가져와 유지하는 공간이다.

1. Full Route Cache

빌드 타임때 렌더링한 HTML 과 RSC payload 를 캐싱하는 공간으로서 지속적으로 캐싱해준다.

1. Router Cache

React Hydration 을 통해 서버로 부터 준비된 HTML 과 RSC payload를 클라이언트 사이드에 임시적으로 캐싱하는 공간

1. Request Memoization

• 위 그림 처럼 NextJS 는 fetchAPI 를 쓸때 요청을 캐싱 하기 때문에 마음껏 낭비 해도 된다.

//서버 컴포넌트
async function getItem() {
  // The `fetch` function is automatically memoized and the result
  // is cached
  const res = await fetch('https://.../item/1')
  return res.json()
}
 
// getItem 함수는 두번 호출 되지만 첫번째 요청만 실행한다.
const item = await getItem() // cache MISS
 
// 두번쨰 부터는 캐싱
const item = await getItem() // cache HIT

How to work?

1. 첫번째 요청은 당연히 캐시가 없을테니 MISS 후 원본 소스에서 데이터를 가져와서 Requsest Memoization 에 저장한다.
2. 두번째 요청부터는 캐시 HIT 할테고 함수 실행없이 데이터를 가져온다.