Next.js 15.3, Turbopack으로 빌드 속도 UP!
by DD
1년 전
조회수 10
Turbopack 빌드(알파)를 통해 프로덕션 빌드 속도 최대 83% 향상
Client Instrumentation Hook 도입으로 초기 모니터링 및 분석 설정 지원
Navigation Hooks 추가로 라우팅 제어 및 로딩 상태 관리 용이
Turbopack: Webpack 대안의 등장
Turbopack은 Next.js의 빌드 속도를 혁신적으로 개선하는 새로운 빌드 시스템이다. Webpack 기반 빌드 대비 CPU 코어 수 증가에 따라 성능 향상폭이 커진다. 구체적으로 16코어 환경에서 60% 더 빠른 빌드 속도를 제공하며, 향후 지속적인 캐싱을 통해 성능을 더욱 향상시킬 예정이다.
Client Instrumentation Hook: 초기 실행 제어
새롭게 추가된 Client Instrumentation Hook을 사용하면 애플리케이션의 초기 실행 단계에서 모니터링 및 분석 코드를 실행할 수 있다. performance.mark를 사용하여 성능 측정을 시작하고, console.log로 분석을 초기화하며, window.addEventListener('error')를 통해 에러 추적이 가능하다. 따라서 사용자 경험 개선에 기여한다.
Navigation Hooks: SPA 라우팅 제어
onNavigate 및 useLinkStatus와 같은 새로운 Navigation Hooks는 클라이언트 측 라우팅을 더욱 세밀하게 제어할 수 있게 해준다. onNavigate는 페이지 전환 시 실행되어 애니메이션 효과를 구현하거나, preventDefault()를 통해 네비게이션을 취소할 수 있다. useLinkStatus는 로딩 상태를 관리하여 사용자 인터페이스(UI) 반응성을 향상시킨다.
