Vercel이 Next.js 16.3을 출시하며 Turbopack과 Partial Prerendering을 실험적 단계에서 프로덕션 준비 단계로 전환했습니다. 이번 업그레이드는 중소규모 앱의 빌드 속도를 25배 높이고, Time to Interactive(TTI)를 4060% 단축하여 기능을 빠르게 배포하려는 팀에게 눈에 띄는 성능 향상을 약속합니다.

이번 변화가 중요한 이유

Next.js는 오랫동안 개발 및 프로덕션 빌드 모두에 JavaScript로 작성된 JavaScript 번들러인 Webpack에 의존해 왔습니다. 지난 1년 동안 Vercel 팀은 메모리 사용량을 줄이고 빌드 속도를 높이는 Rust 기반의 대체제인 Turbopack을 다듬었습니다. 동시에 정적 HTML과 실시간 동적 콘텐츠를 결합하는 방법으로 Partial Prerendering(PPR)을 테스트해 왔으나, 개발자들은 이를 "선택적 실험 기능"으로 취급해야 했습니다. 이제 두 기능을 모두 안정화(stable) 단계로 격상함으로써, Vercel은 프로덕션 팀이 일반적인 시행착오 없이 즉시 사용할 수 있는 완성된 성능 업그레이드를 제공합니다.

Turbopack 안정화

  • 속도: 중소규모 저장소의 프로덕션 빌드가 이제 2~5배 더 빠르게 실행됩니다.
  • 메모리: 대규모 코드베이스의 메모리 압박을 줄여줍니다.
  • 활성화: next.config.js에 turbo: true를 추가하면 바로 적용됩니다.

트레이드오프(Trade-off)는 더 엄격한 환경입니다. Turbopack은 Node 18.17 이상을 요구하며, 프로젝트에서 의존하는 커스텀 Webpack 플러그인은 Turbopack에서 실행되지 않습니다. 광범위한 플러그인 파이프라인을 사용하는 팀은 스위치를 전환하기 전에 해당 확장 기능을 검토하거나 다시 작성해야 합니다.

더욱 매끄러워진 Server Actions

서버에서 실행되지만 클라이언트에서 호출되는 함수인 Server Actions는 이제 더욱 긴밀한 TypeScript 통합을 지원합니다. 컴파일러가 타입을 자동으로 추론하므로 개발자가 직접 타입 주석을 작성할 필요가 없습니다. 또한 중첩된 객체와 Zod 스키마를 엔드 투 엔드(end-to-end)로 이해하여 런타임 불일치를 줄여줍니다. 새로운 파일 시스템 컨벤션은 액션 해석(action resolution)을 명시적으로 만들어, 모호한 임포트로 인해 발생하는 미묘한 버그를 방지할 수 있도록 돕습니다.

Partial Prerendering (PPR) 프로덕션 준비 완료

PPR을 사용하면 단일 페이지에서 변하지 않는 부분은 정적 HTML로 제공하고, 동적 섹션은 별도로 하이드레이션(hydrating)할 수 있습니다. 정적 마크업은 즉시 그려지며, 백그라운드 페치(fetch)를 통해 인터랙티브한 요소들이 활성화됩니다. 이 방식은 Time to Interactive(TTI)를 40~60% 개선합니다.

PPR 구현은 간단합니다. 기존의 정적 생성(static generation) API로 정적 부분을 표시하고, 동적 부분은 클라이언트 사이드 렌더링으로 넘기면 됩니다. 정적 HTML이 전체 문서로 전달되기 때문에 브라우저는 JavaScript가 실행되기 전부터 렌더링을 시작할 수 있어, 느린 네트워크 환경에서도 체감 성능을 높여줍니다.

기타 주목할 만한 변경 사항

  • 이미지 최적화: LCP(Largest Contentful Paint) 이미지에 fetchPriority를 설정할 수 있어, 브라우저가 히어로 이미지를 먼저 가져오도록 보장합니다.
  • 폰트 처리: next/font가 문자를 자동으로 서브셋(subset)화하여 추가 설정 없이도 페이로드 크기를 줄여줍니다.
  • Middleware: 매칭 엔진이 Rust로 재작성되어 더 빠른 라우트 체크를 제공합니다. 또한 Middleware가 전체 HTML 응답을 반환할 수 있어 에지 렌더링(edge-rendered) 페이지 구현의 길이 열렸습니다.

팀을 위한 즉각적인 조치 사항

  1. Turbopack 활성화: 개발 환경에서 먼저 사용해 보세요. turbo 플래그를 설정하면 프로덕션에서도 동일하게 작동합니다.
  2. Node 업그레이드: 버전 20 이상으로 업그레이드하세요.
  3. Server Actions 검토: 타입 추론의 이점을 확인하고, 이제 불필요해진 수동 타입 주석을 제거하세요.
  4. Partial Prerendering 시범 운영: 사이트 전체에 적용하기 전에 트래픽이 높은 단일 경로에서 먼저 테스트하여 TTI 개선 효과를 측정하세요.

주의 사항 및 고려 사항

성능 향상은 새로운 런타임 요구 사항을 충족해야 가능합니다. 이전 Node 버전에 머물러 있거나 커스텀 Webpack 플러그인을 많이 사용하는 프로젝트는 어려움을 겪을 수 있습니다.

결론적으로: Next.js 16.3은 개발자에게 프로덕션급의 Rust 기반 번들러와 정적/동적 콘텐츠를 결합하는 검증된 방법을 제공합니다. 새로운 기본 설정을 채택하고 호환성 격차를 해결하면, 빌드 속도가 빨라지고 최종 사용자에게 훨씬 더 빠릿한 페이지 경험을 제공할 수 있습니다.