Next.js 데이터 패칭 완전 정복 2 - fetch 캐싱 전략과 옵션Complete Guide to Data Fetching in Next.js 2 - fetch Caching and Options
📅
🚀
들어가기 전에 🔗
Nextjs 15 버전을 기준으로 작성되었습니다. 버전이 올라가면서 변경된 부분이 있을 수 있습니다.
이전 파트에서는
fetch 함수의 기본적인 사용법과 서버 컴포넌트에서 데이터를 패칭하는 방법에 대해 배웠습니다. 이번 파트에서는 좀 더 깊이 들어가 캐싱과 재검증
, 그리고 fetch 함수의 고급 옵션들을 살펴보겠습니다.🚀
Next.js에서의 fetch 캐싱 🔗
Next.js는 기본적으로 모든
fetch 요청을 캐싱합니다. 즉, 동일한 요청이 여러 번 발생하더라도 동일한 응답을 재사용하게 됩니다. 이는 서버 리소스를 줄이고 응답 속도를 높이는 데 매우 유용합니다.
하지만 언제나 캐시된 데이터를 사용하는 것이 좋은 것은 아닙니다. 예를 들어, 자주 바뀌는 데이터를 보여줘야 한다면 캐싱을 끄거나 일정 시간마다 갱신하도록 설정할 수 있어야 합니다.🚀
캐시를 끄는 방법: cache: 'no-store' 🔗
기본적으로 Next.js는 빌드 시점을 기준으로 데이터를 가져오고, 이를 정적으로 제공하려고 합니다. 하지만 실시간 데이터가 필요한 경우에는 다음과 같이 캐싱을 끌 수 있습니다:
const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
cache: 'no-store',
});이렇게 하면 요청이 발생할 때마다 항상 새로운 데이터를 가져오게 됩니다.
🚀
재검증을 통한 ISR(증분 정적 재생성) 🔗
Next.js에서는
next.revalidate 옵션을 사용하여 정적 캐시된 데이터를 일정 시간 후에 재검증
하도록 설정할 수 있습니다. 이 방식을 ISR(Incremental Static Regeneration)이라고 부릅니다.
예시:const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
next: { revalidate: 60 }, // 60초마다 새로 데이터를 가져옵니다
});위와 같이 설정하면, 페이지가 처음 요청될 때는 정적 캐시를 사용하지만, 60초가 지나면 백그라운드에서 데이터를 다시 패칭합니다. 이를 통해 성능과 데이터 최신성을 동시에 확보할 수 있습니다.
🚀
캐시 키 생성 방식 🔗
Next.js는 요청 URL, 헤더, 쿠키 등을 기반으로 내부적으로
고유한 캐시 키(cache key)
를 생성합니다. 즉, URL이 다르거나 요청 헤더가 다르면 서로 다른 캐시로 처리됩니다.
예를 들어 다음 두 요청은 서로 다른 캐시 키를 가집니다:// 서로 다른 캐시 키
fetch('https://api.example.com/data?lang=en')
fetch('https://api.example.com/data?lang=ko')따라서 로케일, 사용자 권한, 테마 등
요청별로 다르게 응답이 필요한 경우
, 쿼리 파라미터나 헤더 등을 이용하여 명시적으로 차이를 만들어주는 것이 좋습니다.🚀
캐시 전략 요약 🔗
| 전략 | 설정 방법 | 설명 |
|---|---|---|
| 정적 캐시 (기본) | 없음 | 빌드시 fetch 실행, 캐시된 데이터 사용 |
| 캐시 사용 안 함 | cache: 'no-store' | 항상 최신 데이터를 가져옴 |
| ISR 방식 | next: { revalidate: n } | n초마다 캐시를 백그라운드에서 갱신 |
🚀
예제: 게시글을 일정 주기로 재검증하기 🔗
export default async function Page() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
next: { revalidate: 3600 }, // 1시간마다 재검증
});
const posts = await res.json();
return (
<ul>
{posts.map((post: { id: number; title: string }) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}이 코드는 페이지가 요청될 때마다 캐시된 데이터를 사용하되, 1시간이 지나면 자동으로 데이터를 다시 가져옵니다.
🚀
결론 🔗
이번 파트에서는
fetch 함수의 고급 옵션들, 특히 캐싱 전략에 대해 자세히 알아보았습니다. no-store, revalidate, 내부 캐시 키 생성 로직 등을 이해함으로써 더 정교하게 데이터 흐름을 제어할 수 있습니다.
다음 파트에서는 병렬 fetch
, 순차 fetch
, 동적 fetch
같은 다양한 패턴에 대해 다뤄보겠습니다.✅
더 생각해 보기 🔗
- fetch 요청에 헤더나 쿠키를 포함하면 캐싱에는 어떤 영향을 줄까요?
- 정적 사이트에서도 실시간 데이터를 일부 보여줄 수 있을까요?
✅