최신 버전의 Next.js가 제공하는 캐싱 기능들에 대해 설명해주세요.
분야: 프론트엔드
최신 버전의 Next.js는 성능 최적화를 위해 다양한 캐싱 기능들을 제공합니다. 크게 리퀘스트 메모이제이션, 클라이언트 라우터 캐시, 데이터 캐시, 풀 라우트 캐시로 나누어 설명드리겠습니다.
먼저, 리퀘스트 메모이제이션은 동일한 요청이 여러 번 발생할 때, 불필요한 추가 요청을 방지하는 기능입니다. 기본적으로 Next.js는 서버 사이드에서 동일한 요청이 중복 발생하면 기존 응답을 재사용합니다. 이를 통해 하나의 페이지 내에 존재하는 중복된 요청을 방지하여 네트워크 비용을 감소시킵니다.
클라이언트 라우터 캐시는 레이아웃, 로딩 상태와 같이 공통적으로 쓰이는 요소에 대한 RSC Payload를 브라우저에 캐싱하는 기능입니다. 이를 통해 클라이언트 측에서 페이지 전환 시 캐싱된 데이터를 활용하기 때문에 빠른 탐색이 가능합니다. 또한 서버 부하가 줄어드는 효과도 있습니다.
데이터 캐시는 네트워크 요청에 대한 응답을 Next 서버에 캐싱하는 기능입니다. Next.js에서는 fetch()에 다양한 데이터 캐시 옵션을 적용할 수 있습니다. 예를 들면, { cache: 'force-cache' }을 통해 캐싱을 적용할 수 있습니다. revalidate 옵션을 통해 캐싱을 적용하되 일정 주기로 갱신하도록 설정할 수도 있습니다. 또한, { cache: 'no-store' }을 통해 캐싱 없이 항상 새로운 데이터를 가져오도록 설정할 수 있습니다.
끝으로, 풀 라우트 캐시는 서버에서 미리 생성된 페이지를 저장하고, 이후 동일한 요청이 들어오면 캐싱된 페이지를 즉시 제공하는 방식입니다. cookies(), headers()와 같은 Dynamic Function을 사용하거나 Route Segment Config를 동적 옵션으로 설정하지 않고, 데이터 캐시를 적용하면 풀 라우트 캐시가 활성화됩니다. fetch()에 revalidate 옵션을 설정하면 일정 주기로 페이지가 갱신되는 ISR 방식으로 동작하도록 설정할 수도 있습니다. 풀 라우트 캐시를 적용하면 페이지 로드 속도를 극대화할 수 있습니다.