Vercel에서 Next.js 16.3 애플리케이션을 운용하면 프리페치(prefetch) 요청이 45% 감소하고, 정적 에셋(static asset)이 17% 줄어들며, 경로 메타데이터 제공 속도는 2배 빨라진다.
어제 Next.js 팀이 Next.js 16.3 릴리스를 발표했습니다. 이번 버전에는 더 효율적인 프리페칭(prefetching), 불변(immutable) 정적 에셋(static asset), 즉각적인 내비게이션 기능이 포함되어 있습니다. Vercel은 이번 릴리스에 발맞춰 Next.js 팀과 협력해 Vercel 플랫폼에서 16.3을 완전히 지원하도록 작업했으며, 성능 향상과 옵저버빌리티(observability) 강화도 함께 이뤄졌습니다. 업그레이드한 애플리케이션에서는 다음과 같은 변화가 확인되었습니다:
프리페치 요청 감소: 16.2에서 16.3으로 업그레이드한 앱은 평균 45%의 프리페치 요청 감소를 경험했으며, 일부 앱은 70% 이상 줄어들었습니다.
정적 에셋 비용 절감: 불변 정적 에셋 덕분에 업그레이드한 앱은 CDN 요청이 17% 감소하고 정적 콘텐츠 전송 바이트가 24% 줄었습니다. 배포 빈도가 높은 프로젝트에서는 글로벌 TTFB(Time to First Byte)가 최대 60%까지 개선되었습니다.
대규모 환경에서의 빠른 라우팅: 핵심 서빙 경로의 라우팅 메타데이터 개선으로, 대형 사이트의 p99 라우트 처리 속도가 약 2배 빨라졌습니다.
Next.js 16.3은 보다 효율적인 프리페칭을 제공하고, 불변 정적 에셋을 기본으로 활성화합니다. 이 두 가지를 제대로 지원하려면 플랫폼 차원의 변경도 필요했습니다. 정적 에셋 캐싱 방식, 라우트 처리 방식, 프로덕션 환경의 가시성 모두를 손봐야 했습니다.
이제 Vercel은 Next.js 배포 간 불변 정적 에셋 재사용을 지원합니다. 불변 정적 에셋은 버전 불일치(version skew) 문제가 발생하지 않으므로, Skew Protection을 활성화하지 않은 프로젝트에서도 안전하며, 재배포 이후에도 브라우저 캐시가 유지됩니다. Next.js는 쿼리 파라미터 기반의 Skew Protection을 사용하기 때문에, 이 변경으로 정적 콘텐츠의 CDN 요청이 17%, 전송 바이트가 24% 줄었습니다. 변경되지 않은 에셋은 재업로드를 건너뛰어 배포 완료 시간도 평균 최대 30% 단축됩니다. Next.js 16.3에서는 불변 정적 에셋이 기본으로 활성화됩니다.
Next.js 16.3은 퍼블릭 경로 /_next/static/immutable/* 아래에 콘텐츠 주소 기반의 불변 정적 에셋을 출력합니다. Vercel CDN은 이 경로 접두사를 활용해 불변 정적 에셋과 일반 정적 에셋을 구분합니다.
프레임워크 개발자로서 자신의 툴체인에 이 기능을 구현하고 싶다면, Build Output API 문서의 불변 정적 파일 섹션을 참고하세요.
Next.js 16은 애플리케이션의 공통 영역을 링크마다 새로 가져오는 대신, 한 번 프리페치한 뒤 여러 내비게이션에서 재사용하는 최적화를 도입했습니다. 이 재사용을 가능하게 하려면 각 공유 세그먼트(segment)를 개별적으로 가져올 수 있어야 하므로, Next.js는 동일한 애플리케이션에 대해 훨씬 더 많은 경로를 생성합니다.
이렇게 늘어난 경로는 플랫폼 측에도 부담이 됩니다. Next.js 같은 프레임워크는 Build Output API를 통해 Vercel에 배포되는데, 프레임워크는 각 경로마다 서빙 방식을 기술하는 메타데이터 파일(예: 프리렌더 설정)을 생성합니다. Vercel CDN은 모든 요청 경로에서 이 메타데이터를 읽어야 하므로, 각 조회는 밀리초 이내에 완료되어야 하며 이를 위해 메타데이터를 캐시합니다. 전 세계적으로 이 조회는 초당 500만 건에 달합니다. Next.js 16 애플리케이션이 더 많은 경로를 생성하면서 캐시 항목이 늘고 히트율이 떨어졌으며, 대형 애플리케이션에서 p99 TTFB가 높아지는 현상이 나타났습니다.
이 문제를 해결하기 위해 라우트 메타데이터를 제공하는 레이어를 개선했습니다. 결과적으로 처리 속도는 약 2배 빨라지고, 캐시 미스는 약 10배 줄었습니다. 기존에는 각 세그먼트의 메타데이터를 별도 캐시 항목으로 저장했지만, 이제는 항목들을 JSONL 형식의 샤드(shard)로 묶어 관리하고, 해당 샤드를 중심으로 인프로세스 캐싱과 원격 캐싱을 최적화했습니다. 항목 수가 줄고 크기가 커지면서 히트율이 높아졌으며, JSONL 형식 덕분에 CDN이 샤드 내에서 원하는 항목을 빠르게 찾을 수 있습니다.
이 개선 사항은 플랫폼에 이미 적용되어 모든 배포에 즉시 반영되며, Build Output API를 통해 배포하는 다른 프레임워크도 자동으로 혜택을 받습니다.
Next.js 16.3에 포함된 프리페칭 개선으로 프리페치 요청이 45% 감소했습니다. 이제 Vercel Observability와 Runtime Logs에서 특정 요청이 프리페치였는지 조회할 수 있으며, Observability Plus의 쿼리 빌더를 통해서도 확인할 수 있습니다.
증분 정적 재생성(ISR, Incremental Static Regeneration) 재검증(revalidation)에 대한 가시성을 높여달라는 사용자 요청도 많았습니다. 이제 ISR 옵저버빌리티 페이지에서 시간 기반 재검증과 온디맨드 재검증을 명확하게 확인할 수 있으며, 캐시 이유와 ISR 쓰기 사용량도 함께 제공합니다. 또한 ISR 재검증을 줄이는 방법 가이드도 공개했습니다.
오늘은 부분 프리렌더링(PPR, Partial Prerendering)에 대한 옵저버빌리티도 새롭게 선보입니다. PPR은 페이지의 정적 영역을 즉시 제공하고, 개인화나 실험과 같은 동적 콘텐츠는 스트리밍 방식으로 전달합니다. 내부적으로는 ISR과 Vercel Functions를 하나의 시스템으로 결합해, 애플리케이션이 두 기능의 이점을 동시에 누릴 수 있습니다. Cache Components를 사용하는 Next.js 16 애플리케이션은 Vercel에 배포하면 PPR이 자동으로 적용됩니다.
Vercel 대시보드의 PPR Observability 페이지에서는 각 요청이 정적 콘텐츠, 동적 콘텐츠, 또는 두 가지를 혼합하여 제공하고 있는지 확인할 수 있습니다. 정적 쉘(shell)이 정상 동작하는지 확인하거나, 완전 동적으로 퇴행한 라우트를 파악하고, 함수가 언제 실행되는지 모니터링하는 데 활용하세요.
더 자세한 내용이 필요하다면 ISR 또는 Functions 옵저버빌리티 페이지로 이동해 캐시 재검증이나 함수 실행 내역을 확인하세요.
Next.js 16.3이 오늘부터 사용 가능합니다. 새로운 기능을 활용하려면 지금 업그레이드하세요:
pnpm add next@16.3.0
전체 릴리스 노트는 Next.js 16.3 발표 글을 참고하거나, Vercel의 Next.js에 대해 더 자세히 알아보세요.
