Next.js 'use cache'로 컴포넌트 캐싱, 더 쉽고 강력하게!
by DD
1년 전
조회수 4
'use cache' 디렉티브를 통해 Next.js에서 데이터 또는 컴포넌트를 쉽게 캐싱
컴파일러가 'use cache'를 인식하여 의존성 자동 관리 및 캐시 키 생성
직렬화 및 참조 방식을 통해 비직렬화 가능한 값도 효율적으로 캐싱
'use cache'의 작동 원리
'use cache'는 Next.js 컴파일러에게 캐싱 영역을 지정하는 지시어이다. 구체적으로, 컴파일 시 의존성 분석을 통해 캐시 키를 자동으로 생성한다. 따라서 개발자는 캐시 키 관리에 대한 부담 없이 캐싱을 적용할 수 있으며, 서버 컴포넌트의 성능을 향상시킨다.
Directive vs. Function: 장단점 비교
Directive 방식인 'use cache'는 클로저 내부 변수까지 캐시 키에 포함하여 안정적인 캐싱을 보장한다. 반면, cache() 함수는 수동적인 캐시 키 지정을 요구하여 캐시 키 누락의 위험이 있다. 결과적으로, 'use cache'는 개발 편의성과 캐싱 정확도를 동시에 잡았다.
비직렬화 값의 효율적 처리
'use cache'는 직렬화 가능한 값은 캐시 키로 사용하고, 비직렬화 값은 서버 참조를 통해 처리한다. 구체적으로, React의 직렬화 방식을 활용하여 다양한 데이터 타입을 지원한다. 따라서 JSX와 같은 복잡한 값도 캐싱 가능하며, 컴포저블 캐싱을 구현하여 유연성을 확보했다.
