개념 설명
Next.js 서버 환경에서 fetch API를 통해 호출된 데이터의 결과를 저장하고 재사용하는 기술.
동일한 데이터 요청이 반복될 때 원본 서버나 DB에 매번 접근하지 않고, 미리 저장된 값을 반환하여 응답 속도를 비약적으로 향상시키는 것이 핵심.
서버 자원 절약 및 사용자 경험 개선에 필수적인 요소.
사용 상황 예시
- 정적 콘텐츠 제공: 변경이 거의 없는 블로그 포스트나 약관 페이지 데이터 로드 시
force-cache사용.
- 실시간성 데이터 처리: 금융 시세, 개인 프로필 정보처럼 최신 상태 유지가 필수인 경우
no-store적용.
- 주기적 업데이트: 뉴스 피드나 날씨 정보처럼 일정 시간마다 갱신이 필요한 서비스에
revalidate설정.
- 관리자 기반 갱신: CMS에서 콘텐츠 수정 시 즉시 웹사이트에 반영해야 할 때
tags기반의 On-Demand Revalidate 활용.
기본 문법 및 옵션
Next.js의 확장된 fetch 문법을 통해 간결하게 설정 가능.
| 옵션 | 코드 예시 | 특징 |
|---|---|---|
| 강제 캐싱 | { cache: 'force-cache' } | 첫 요청 후 영구적으로 데이터 보관 및 재사용 |
| 캐싱 해제 | { cache: 'no-store' } | 매 요청마다 캐시 확인 없이 새로 페칭 수행 |
| 시간 기반 갱신 | { next: { revalidate: 3600 } } | 설정한 시간(초)이 지나면 백그라운드에서 데이터 갱신 |
| 태그 기반 갱신 | { next: { tags: ['data-tag'] } } | 특정 태그를 지정하여 필요 시점에만 수동으로 캐시 초기화 |
자주 하는 실수
- 동적 함수와의 간섭:
cookies()나headers()같은 동적 함수를 함께 사용할 경우, 별도 설정이 없으면 캐싱이 비활성화될 수 있음에 유의 필요.
- 클라이언트 측 오해: 해당
fetch캐싱은 브라우저 캐시가 아닌 Next.js 서버 캐시에서 동작함을 명확히 인지 필요.
- POST 요청 캐싱 시도: 기본적으로
fetch캐싱은 GET 요청에 최적화되어 있으며, POST 요청은 별도의 설정 없이는 자동 캐싱되지 않음을 확인 필요.
핵심 요약
- 서버 자원 효율 극대화: 불필요한 API 호출을 줄여 웹 서비스 성능의 획기적 개선 가능.
- 전략적 옵션 선택: 서비스의 데이터 특성(정적 vs 동적)에 맞는 4가지 옵션의 적절한 배분 필요.
- 데이터 정합성 유지:
revalidate와tags를 활용한 지능적인 데이터 최신화 관리 권장.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
