NextJS 캐싱

캐싱이란 어떤 데이터를 한 번 받아온 후에 그 데이터를 불러온 저장소 보다 가까운 곳에 임시로 저장하여, 필요시 더 빠르게 불러와서 사용하는 프로세스를 의미한다.

NextJS는 웹서버 성능을 향상시키기 위해 다양한 캐싱 방식을 제공한다.

1. Data Cache(데이터 캐시)

GET 요청과 같이 데이터의 변화가 적은 데이터를 매번 가져오는 것은 효율이 나쁘다.

NextJS는 웹서버로 들어오는 요청의 결과를 데이터캐시에 저장되며, 이후의 요청은 캐싱된 값을 사용하게 된다.

fetch를 호출하면 기본적으로 정적캐싱(cache: 'force-cache') 이 적용되고, 동일한 URL로 요청하면 NextJS 가 자동으로 캐싱된 응답을 반환한다.

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // 기본값: 캐싱된 데이터 사용
  });
  return res.json();
}

(cache: 'no-store') 설정을 하면 캐싱을 방지하고 매번 새로운 데이터를 보낸다.

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store', // 매 요청마다 새로운 데이터 가져오기 (캐싱 안 함)
  });
  return res.json();
}

// Route Segment config Option 을 사용하면 해당 route 세그먼트 내 모든 fetch 캐싱을 사용하지 않는다.
export const dynamic = 'force-dynamic'

next.revalidate를 사용하면 지정한 시간마다 캐시를 갱신한다.

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 }, // 60초마다 캐시 갱신
  });
  return res.json();
}

변하지 않는 정적 데이터나, 자주 변경되지 않는 데이터에 사용된다.

2. Request Memorization

랜더링사이클에서 서버컴포넌트가 수행하는 fetch 요청을 캐싱하는 React 기능이다.

한 서버컴포넌트에서 수행한 요청을 다른 서버컴포넌트가 다시 요청하는경우 두번째의 경우 다시 요청하지 않고 캐싱된 값을 사용한다.

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data1 = await getData();
  const data2 = await getData(); // 중복 요청되지 않고 첫 번째 결과가 재사용됨

  return <div>{data1.message}</div>;
}

같은 데이터를 여러 번 요청하는 경우, 불필요한 API 요청을 줄이고 성능을 최적화 하고 싶을 때 사용한다.

Data Cache 방식과 유사해보이나 둘은 다른 목적에 의해 사용된다.

Data Cache는 웹서버가 중단되기 전 까지 데이터의 유지에 목적을 두며, 변경되지 않을 데이터에 중점을 둔다.

Request Memorization은 렌더링 종료시 까지 컴포넌트들의 동일요청을 방지하는데 목적을 두며, 렌더링 종료시 캐시가 삭제된다.

3. Full Route Cahce (전체 라우트 캐시)

서버 컴포넌트의 렌더링 결과를 캐싱하는 방식

서버 컴포넌트가 렌더링될 때 그 결과 자체를 캐싱한다.
동일한 요청이 오면 서버컴포넌트를 다시 실행하지 않고 캐싱된 HTML을 반환한다.

페이지 전체를 캐싱하고 싶지 않다면 dynamic = 'force-dynamic'을 설정해야 함.

변하지않는 정적페이지, SSR을 강제하고 싶지 않은경우 사용된다.

4. Router Cache

위의 셋과는 달리 클라이언트에서 발생하는 캐싱이다.
최근에 방문한 페이지를 캐싱한다.
뷰포트 내의 Link 컴포넌트의 route를 사전 캐싱한다.

페이지 전환속도가 빨라지며, 최근 방문한 페이지를 빠르게 복원 할 수 있다.