📖 TIL - 최신 Next.js에서 제공하는 캐싱기능들

Next는 기본적으로 성능 최적화를 위해 다양한 캐싱기능들을 제공합니다. 크게 리퀘스트 메모이제이션, 클라이언트 라우터 캐시, 데이터 캐시, 풀 라우트 캐시로 나누어 정리해보았다.

리퀘스트 메모이제이션

• 동일한 요청이 여러번 발생할 때, 불필요한 추가 요청을 방지하는 기능

• 기본적으로 Next.js는 서버 사이드에서 동일한 요청이 중복발생하면 기존 응답을 재사용

=> 하나의 페이지 내에 존재하는 중복된 요청을 방지를 통한 네트워크 비용 감소

클라이언트 라우터 캐시

• 레이아웃, 로딩 상태와 같이 공통적으로 쓰이는 요소에 대한 RSC Payload를 브라우저에 캐싱하는 기능

• 클라이언트 측에서 페이지 전환 시 캐싱된 데이터를 활용하기에 빠른 탐색이가능함

=> 서버 부하 감소

데이터 캐시

• 네트워크 요청에 대한 응답을 Next서버에 캐싱하는 기능
  Next에서는 fetch()에 다양한 데이터캐시 옵션을 적용가능함

{cache: 'force-cache'}

을 사용하게 되면 캐싱을 적용할 수 있음
revalidate옵션을 통해 캐싱을 적용하되 일정주기로 설정할 수도 있음

{cache: 'no-store'}

풀 라우트 캐시

• 서버에서 미리 생성된 페이지를 저장하고, 이후 동일한 요청이 들어올 경우 캐싱된 페이지를 즉시 제공함
• cookie(), headers()와 같은 Dynamic Function을 사용하거나 Route Segment Config를 동적 옵션으로 설정하지 않고, 데이터 캐시를 적용하면 풀 라우트 캐시가 활성화됨
• fetch()에 revalidate 옵션을 설정하면 일정주기로 페이지가 갱신되는 ISR방식으로 동작하도록 설정할 수 있음

=> 페이지 로드 속도를 극대화 할 수 있음