Next.js 16.2, Turbopack으로 개발 속도 UP!
Turbopack이 Next.js의 기본 번들러로 채택된 후, 성능 향상과 버그 수정을 통해 개발자 경험(Developer Experience) 개선에 집중
Server Fast Refresh 기능 개선으로 서버 측 코드 변경 시 재로딩 속도(Reloading Speed) 375% 향상 및 컴파일 시간 단축
Subresource Integrity(SRI) 지원을 통해 빌드 타임에 자바스크립트 파일의 해시를 생성하여 보안 강화(Security Enhancement)
Inline Loader Configuration 도입으로 개별 import에 로더 설정 가능하며, 코드 유연성(Code Flexibility) 증대
Server Fast Refresh의 작동 원리
본문에 따르면, Next.js 16.2는 서버 측 코드 변경 시 Fast Refresh 방식을 도입하여 개발 생산성을 향상시켰다. 기존 방식은 변경된 모듈과 import 체인 내 모든 모듈을 재로딩하여 불필요한 오버헤드(Overhead)를 발생시켰다.
새로운 시스템: 변경된 모듈만 재로딩하여 컴파일 시간(Compile Time) 400~900% 단축
결과: 애플리케이션 리프레시(Application Refresh) 속도 67~100% 향상
향후 과제: Proxy 및 Route Handlers 지원 추가 예정
이러한 개선은 개발 환경에서 빠른 피드백 루프(Feedback Loop)를 제공하여 개발 효율성을 높인다.
Subresource Integrity(SRI)를 통한 보안 강화
Turbopack은 이제 Subresource Integrity(SRI)를 지원하여 빌드 시 자바스크립트 파일의 암호화 해시를 생성한다. 이를 통해 브라우저는 파일이 수정되지 않았음을 검증할 수 있다.
Content Security Policy(CSP): 사이트에서 실행 가능한 자바스크립트를 제한하여 보안 문제(Security Issues)를 방지
SRI의 장점: 동적 렌더링(Dynamic Rendering) 없이 해시를 계산하여 성능 저하(Performance Degradation) 방지
구현 방법: `next.config.js` 파일에서 `experimental.sri` 옵션 활성화
SRI는 XSS 공격(Cross-Site Scripting Attack) 방어에 효과적이며, 웹 애플리케이션의 전반적인 보안 수준을 향상시킨다.
Inline Loader Configuration의 활용
Turbopack은 이제 import 속성을 통해 개별 import에 로더를 설정하는 Inline Loader Configuration을 지원한다. 이는 `turbopack.rules`를 통한 전역 설정보다 세분화된 제어가 가능하다.
사용 목적: 특정 import에만 특별한 처리가 필요할 때, 동일 파일 타입(File Type)의 다른 import에 미치는 부작용(Side Effects) 방지
설정 방법: `import rawText from './data.txt' with { turbopackLoader: 'raw-loader' }`와 같이 `with` 절 사용
주의 사항: inline loader는 코드 이식성(Code Portability)을 저해할 수 있으므로, `next.config.ts`에서 설정하는 것을 권장
이 기능은 플러그인(Plugin) 또는 로더(Loader)에서 생성된 코드에 유용하며, 코드의 유연성(Code Flexibility)을 높이는 데 기여한다.
Lightning CSS 설정 옵션
Turbopack은 CSS minification 및 prefixing을 위해 Rust 기반의 Lightning CSS를 사용한다. Next.js 16.2에서는 실험적으로 `lightningCssFeatures` 옵션을 제공하여, 특정 CSS 기능을 항상 또는 절대 변환하지 않도록 설정할 수 있다.
기존 방식: Browserslist 설정을 통해서만 제어 가능
새로운 옵션: `include` 및 `exclude`를 사용하여 세부적인 CSS 기능 제어 가능
예시: `light-dark` 및 `oklab-colors` 기능 포함, `nesting` 기능 제외
이러한 기능을 통해 개발자는 CSS 컴파일(CSS Compilation) 과정을 더욱 세밀하게 제어하고, 구형 브라우저(Older Browsers) 호환성을 확보할 수 있다.
