[NEXT] App Router의 데이터 캐시에 대해 정리하며 이해하기

본 포스팅은 인프런 강의
<한 입 크기로 잘라먹는 Next.js(15 +) - 이정환 Winterlood>
의 내용을 기반으로 작성합니다 ✍

한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런

 

데이터 캐시(Data Cache)

fetch를 통해 서버로부터 불러온 데이터를 Next 서버에 보관하는 기능을 말한다.

한 번 불러온 데이터를 영구적으로 보관하거나, 특정 시간을 주기로 갱신 시키는 것이 가능하다.

 

이런 캐싱을 통해 불필요한 데이터 요청의 수를 줄여 웹 서비스의 성능을 크게 개선할 수 있다.

 

사실 Next.js의 이전 버전(~ v14)에서는 무조건 캐싱되도록 설정이 되어있었다. 하지만 이를 불편하게 여기는 케이스가 존재하자, 신규 버전(v15)에서 캐싱 여부를 선택할 수 있도록 개발자에게 맡겼다라고 이해하면 된다.

 

 

사용자는 데이터 캐시 여부를 fetch 메서드의 두 번째 매개변수로 받아서 적용할 수 있다.

const response = await fetch("서버 api 주소", { cache: "캐시 옵션" });

 

선택할 수 있는 캐시 옵션은 아래에서 정리해본다.

 

 

캐시 옵션 살펴보기

{ cache: "no-store" }

기본 값

데이터 페칭의 결과를 저장하지 않는다. 즉, 캐싱을 아예 하지 않는다.

 

브라우저로부터 접속 요청이 들어오게 되면 Next 서버는 사전 렌더링을 진행하게 되는데, 이 때 캐시 옵션이 no-store로 설정되어 있는 데이터 페치 요청이 발생하게 되면 데이터 캐시 과정을 그대로 무시한다. 즉, 그대로 백엔드 서버에게 데이터를 요청하고 이렇게 응답받은 데이터로 페이지를 생성해 반환한다.

출처 4.2) 데이터 캐시

 

next.config 설정을 통해 데이터 페칭마다 로그를 띄우도록 설정한 뒤 살펴보면 캐싱 여부를 명확히 볼 수 있다.

다음과 같이 해당 요청에 대해 cache skip 됨을 표시하고 그 이유(cache: no-store)를 알려준다.

 

* 데이터 페칭 시 로그를 출력하도록 하는 next.config 옵션은 다음과 같다.

// next.config.mjs
const nextConfig = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

 

 

{ cache: "force-cache" }

요청의 결과를 무조건 캐싱한다.

최초 한 번 호출된 이후 다시는 호출되지 않는다.

 

브라우저로부터 접속 요청이 들어오게 되면, 데이터 캐시에서 저장된 캐시가 있는 지를 먼저 확인한다. 만일 저장된 캐시가 없다면(miss) 일단은 백엔드 서버로부터 데이터를 요청해 응답받고 이를 캐시에 저장한다. 이후로는 저장된 캐시를 찾아내어(hit) 빠르게 페이지를 생성해 반환한다.

출처 4.2) 데이터 캐시

 

마찬가지로 로그를 통해 살펴보면 cache hit 됐음을 확인할 수 있다.

 

그리고 이렇게 저장된 캐시는 json 형태로 Next.js 서버에 저장된다.

.next > cache > fetch-cache

 

 

{ next: { revalidate: 초 } }

마치 Page Router의 ISR 방식처럼 특정 시간을 주기로 캐시된 데이터를 업데이트 한다.

revalidate 값이 3이면 3초 주기이다.

 

기본적으로는 동작 방식이 { store: "force-cache" } 때와 동일하지만, revalidate로 지정한 주기 이후에 데이터 요청을 하면 일단은 저장되어 있던 캐시(stale)를 활용해 페이지를 반환하고, Next.js 서버가 백엔드 서버로부터 데이터를 요청하여 캐시를 최신화시킨다. (Revalidate Data) 그 이후 요청에는 이 최신 데이터를 활용하게 된다.

출처 4.2) 데이터 캐시

 

 

{ next: { tags: ['a'] } }

요청이 들어왔을 때에만 데이터를 업데이트 한다.

마치 Page Router의 On-Demand Revalidate ISR과 유사하다.

 

 

사용 시 주의사항

참고로 이러한 데이터 캐시의 옵션들은 Next.js가 제공하는 fetch 메서드에서만 사용이 가능하다.

이는 일반적인 fetch 메서드가 아니라 Next.js가 자체적으로 여러 기능을 추가한 일종의 확장판 개념의 메서드이기 때문이다.

axios등의 다른 HTTP request 라이브러리에서는 활용할 수 없으므로 주의해야 한다. 

 

 

💡 React-Query 와의 차이점

누군가 React-Query의 useQuery와 비교했을 때 어떤 점이 다른가에 대해 고찰한 내용을 보았다.

핵심은 서버 캐시라는 것이였다.

 

useQuery의 캐싱은 사용자의 개인적인 캐싱 기능으로 Client 캐싱에 해당한다.

반면 Next.js의 캐싱은 Next.js Server에서의 캐싱을 이야기한다.

만일 1,000명의 사용자가 동일한 요청을 한다면, API에는 초기 한 번의 요청이 이루어지며 999명에게는 캐싱된 데이터를 반환하게 되는 것이다. 이를 통해 서버자원을 대폭 아낄 수 있다는 장점을 갖는다.