Next.js, 캐싱 설정을 더 쉽게! use cache 등장
by DD
1년 전
조회수 2
Next.js App Router의 기본 캐싱 설정으로 개발 경험이 저하되는 문제 발생
use cache와 dynamic 디렉티브를 도입하여 캐싱 제어 방식 개선
cacheTag, cacheLife API를 통해 캐시 관리 유연성 확보
Next.js 캐싱 아키텍처의 변화
Next.js는 React Server Components를 활용하여 서버 측 렌더링을 수행한다. 따라서 fetch()의 기본 캐싱 설정을 변경하여 성능을 최적화했다. 구체적으로 use cache 디렉티브를 통해 페이지 또는 컴포넌트 단위의 캐싱 제어가 가능해졌으며, dynamic 옵션을 통해 동적 데이터 로딩을 유연하게 처리한다.
use cache vs dynamic: 선택 가이드
use cache는 정적 콘텐츠에 적합하며, 페이지 전체를 캐싱한다. 반면, dynamic은 동적 데이터를 위한 옵션으로, 매 요청마다 데이터를 갱신한다. 따라서 개발자는 데이터의 성격에 따라 적절한 옵션을 선택해야 하며, cacheTag와 cacheLife API를 활용하여 캐시 유지 기간을 세밀하게 제어할 수 있다.
캐싱 전략: 실전 적용 팁
Next.js App Router에서 캐싱 전략을 효과적으로 적용하기 위해, use cache를 레이아웃 레벨에 적용하여 공통 데이터를 캐싱할 수 있다. 구체적으로, cacheTag를 사용하여 캐시 항목을 태깅하고, revalidateTag를 통해 선택적으로 캐시를 무효화한다. 결과적으로, 데이터 일관성을 유지하면서 성능 향상을 달성할 수 있다.
