App Router (6) - 데이터 캐시, Request Memoization

2026.09.25 · 2분 읽기 · 조회 0

데이터 캐시(Data Cache)

데이터 캐시란, fetch 메서드를 활용해 불러온 데이터를 Next 서버에서 보관하는 기능이다.
이를 통해 영구적으로 데이터를 보관하거나, 특정 시간을 주기로 갱신 시키는 것도 가능하다.
-> 불필요한 데이터 요청의 수를 줄여 웹 서비스의 성능을 크게 개선할 수 있다.

const response = await fetch(`~/api`, { cache : "force-cache" });

기본의 fetch 함수에 두 번째 인자로 캐시 옵션을 넣어줄 수 있다. 이와 같은 캐시 기능들은 axios와 같은 외부 라이브러리에서는 사용이 불가하므로, Next에서 기본 제공하는 fetch메서드 에서만 사용이 가능하다.

캐싱은 다양한 옵션들을 지닌다.

cache : "no-store" (SSG)

• 데이터 페칭의 결과를 저장하지 않는 옵션
• 캐싱을 아예 하지 않도록 설정하는 옵션

캐시 옵션을 설정하지 않으면 기본으로 "no-store"로 설정된다.
Page Router의 SSR 방식이라고 생각하면 된다.

cache : "force-cache"

• 요청의 결과를 무조건 캐싱한다.
• 한 번 호출된 이후에는 다시는 호출되지 않는다.

next : { revalidate : 시간 }

특정 시간을 주기로 캐시를 업데이트 한다.
Page Router의 ISR 방식이라고 생각하면 된다.

next : { tags : ['a'] }

• On-Demand Revalidate 방식이다.
• 요청이 들어왔을 때 데이터를 최신화 한다.
• 서버 액션을 사용해야 한다. 추후 자세히 살펴본다.

Request Memoization

서버 컴포넌트의 도입으로 각 컴포넌트는 개별의 요청을 보낸다.
이의 경우 각 컴포넌트가 동일한 데이터를 여러 번 요청할 수도 있다.

그럴 경우 비효율 문제가 생길 것 같지만, Next.js에서는 자동으로 리퀘스트 메모이제이션이라는 기능을 통해서 중복된 요청을 처리해준다.
때문에 중복되는 요청에 대해 걱정할 필요 없다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글