제목
🧠 Next.js에서 반드시 알아야 할 4가지 캐싱 전략
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *프론트엔드 개발자** (중급~고급)
- 난이도: Next.js의 캐싱 메커니즘과 SSR/SSG 이해 필요
- 관련 분야: 성능 최적화, SEO, 서버리스 환경
핵심 요약
no-store사용: 항상 최신 데이터를 보장 (예:next: { cache: 'no-store' })revalidateTag활용: 특정 캐시 무효화로 실시간성 유지 (예:revalidateTag('todos'))- Build-time Cache vs Page Cache: 마케팅 페이지에
Build-time Cache, 대시보드에Page Cache사용 - Prefetch 기능:
로 정적 경로 자동 사전 로딩
섹션별 세부 요약
1. 기본 캐싱 메커니즘
- 동일한
fetch요청은 메모리 캐시로 한 번만 처리 (서버리스 환경에서는 인스턴스 간 공유 불가) - URL, 쿼리, 헤더가 모두 일치해야 캐싱 적용
- 과도한 캐시는 메모리 과부하 유발 가능성
2. 정적 캐싱 (`next build`)
next build시점에 데이터 고정 (예:force-cache방식)- 배포 환경에서는
auto정책 적용 - 예:
const TodoListPage = async () => { const todos = await getTodoList(); }
3. SSR 기반 페이지 캐싱
- ISR (Incremental Static Regeneration) 기반으로 유저 요청 시 캐시 생성
- 예: 로그인 후 대시보드 페이지에 적용 가능
- 캐시 무효화 조건:
revalidateTag또는 ISR 기간 경과
4. Prefetch 및 성능 최적화
로 정적 경로 자동 Prefetch (Intersection Observer 기반)- 브라우저 캐시 활용으로 로딩 속도 향상
- 예:
const Parent = () =>에서 자식 컴포넌트 데이터 사전 로딩
5. 링크 드라퍼 서비스
- 폴더별 링크 정리, OG 이미지 자동 추출, 공유 URL 생성 기능
- 크롬 익스텐션으로 원클릭 저장 가능
- 베타 체험: 크롬 웹스토어
결론
no-store는 실시간 데이터에 필수,revalidateTag로 세분화된 캐시 제어- Prefetch는 사용자 경험 향상에 효과적 (정적 경로에 적용)
- Build-time Cache는 마케팅 페이지, Page Cache는 대시보드 등 유동적 콘텐츠에 적합
- 캐시 전략 선택 시: ISR 기간, 자원 소모량, SEO 영향 고려 필수