오늘 Next.js 팀은 더 가벼워진 프리페칭 (prefetching), 불변의 정적 자산 (immutable static assets), 그리고 즉각적인 탐색 (instant navigations) 기능을 갖춘 Next.js 16.3의 출시를 발표했습니다. 이번 출시의 일환으로, 저희는 Next.js 팀과 협력하여 더 나은 성능과 추가적인 관찰 가능성 (observability)을 포함하여 Vercel에서 16.3 버전을 완벽하게 지원하도록 작업했습니다. 업그레이드를 완료한 애플리케이션들은 다음과 같은 효과를 확인했습니다:

Next.js 16.3은 더 가벼워진 프리페칭 (prefetching)을 제공하며, 기본적으로 불변의 정적 자산 (immutable static assets)을 활성화합니다. 이 두 가지를 모두 지원한다는 것은 정적 자산을 캐싱하고, 경로를 해석하며, 프로덕션에서 발생한 일을 나타내는 플랫폼 방식 또한 변경되어야 함을 의미했습니다.

Vercel은 이제 Next.js를 위해 배포 간 재사용을 지원합니다. 불변의 정적 자산 (immutable static assets)은 Skew Protection이 활성화되지 않은 프로젝트에서도 버전 불일치 (version skew) 문제를 겪지 않으며, 브라우저 캐시는 재배포 후에도 유지됩니다. Next.js가 쿼리 파라미터 기반의 Skew Protection을 사용하기 때문에, 이 변경을 통해 정적 콘텐츠에 대한 CDN 요청은 17% 감소했고 전송된 바이트 수는 24% 감소했습니다. 또한 변경되지 않은 자산은 재업로드를 건너뛰기 때문에 배포 속도가 평균적으로 최대 30% 더 빨라졌습니다. Next.js 16.3에서는 불변의 정적 자산 (immutable static assets)이 기본적으로 활성화됩니다. 불변의 정적 자산 (immutable static assets)

Next.js 16.3은 /_next/static/immutable/* 경로 아래에 콘텐츠 주소 지정 방식 (content-addressed)의 불변 정적 자산을 출력합니다. Vercel CDN은 이 접두사 (prefix)를 사용하여 불변의 정적 자산을 다른 정적 자산과 구분합니다.

만약 프레임워크 제작자로서 자신의 툴체인에 이를 구현하고 싶다면, Build Output API 문서의 불변 정적 파일 섹션을 참조하십시오.

Next.js 16은 애플리케이션의 공통 부분을 매 링크마다 다시 가져오는 대신, 한 번 프리페칭 (prefetching)하여 탐색 간에 재사용하는 최적화를 도입했습니다. 이러한 재사용이 작동하려면 각 공유 세그먼트 (shared segment)를 개별적으로 가져올 수 있어야 하므로, Next.js는 동일한 애플리케이션에 대해 훨씬 더 많은 경로를 생성합니다.

이러한 추가적인 경로들은 플랫폼 측면에서 누적됩니다. Next.js와 같은 프레임워크는 Build Output API를 통해 Vercel에 배포되며, 프레임워크가 생성하는 각 경로에 대해 이를 어떻게 서빙할지 설명하는 메타데이터 파일(예: .의 설정 등)을 생성합니다. Vercel CDN은 모든 요청 과정에서 해당 메타데이터를 읽어야 하므로, 각 조회(lookup)는 밀리초(ms) 단위 이하로 완료되어야 하며, 이 예산(budget)을 준수하기 위해 메타데이터를 캐싱합니다. 전 세계적으로 이는 초당 500만 건의 조회에 해당합니다. Next.js 16 애플리케이션이 더 많은 경로를 배포함에 따라 캐시에는 더 많은 항목이 담기게 되었고, 이로 인해 히트율(hit rates)이 떨어졌으며, 규모가 큰 애플리케이션에서 p99 TTFB(Time to First Byte)가 증가하는 현상이 관찰되었습니다.prerender configuration

이를 해결하기 위해, 저희는 라우트 메타데이터를 서빙하는 레이어를 개선하여 속도를 약 2배 향상시키고 캐시 미스(cache misses)를 약 10배 줄였습니다. 각 세그먼트의 메타데이터를 개별 캐시 항목으로 저장하는 대신, 이제 항목들을 JSONL 형식의 샤드(shards)로 결합하며, 이러한 샤드를 중심으로 인프로세스(in-process) 및 원격 캐싱을 최적화했습니다. 항목의 수는 적어지고 크기는 커짐에 따라 히트율이 향상되었으며, JSONL 형식을 통해 CDN은 샤드 내부에서 올바른 항목을 여전히 빠르게 찾을 수 있습니다.

이 개선 사항은 플랫폼에 구현되어 이미 모든 배포에 적용되어 있으므로, Build Output API를 통해 배포되는 다른 프레임워크들도 자동으로 그 혜택을 받게 됩니다.

Next.js 16.3에는 프리페치(prefetch) 요청을 45% 감소시킨 improvements to prefetchings가 포함되어 있습니다. 이제 Vercel Observability, Runtime Logs, 또는 쿼리 빌더의 Observability Plus에서 해당 요청이 프리페치였는지 여부를 쿼리할 수 있습니다.

또한 재검증 (revalidations)에 대해 더 높은 가시성을 원하는 사용자들의 의견을 수렴했습니다. 이제 대시보드에 시간 기반 (time-based) 및 온디맨드 (on-demand) 재검증이 눈에 띄게 표시되며, 캐시 사유 (cache reasons)와 ISR 쓰기 활용도 (ISR write utilization)를 노출하며, ISR 재검증을 줄이는 방법에 대한 가이드를 게시했습니다. 증분 정적 재생성 (Incremental Static Regeneration (ISR)) ISR 관측성 (ISR observability) 페이지

오늘, 저희는 부분 사전 렌더링 (Partial Prerendering (PPR))을 위한 관측성 (observability) 기능도 출시합니다. PPR은 페이지의 정적 부분을 즉시 제공한 다음, 개인화 (personalization) 또는 실험 (experimentation)과 같은 동적 콘텐츠를 스트리밍합니다. 내부적으로는 ISR과 Vercel Functions를 하나의 시스템으로 결합하여 애플리케이션이 두 가지의 이점을 동시에 누릴 수 있도록 합니다. PPR을 사용하는 Next.js 16 애플리케이션은 Vercel에 배포될 때 자동으로 PPR을 적용합니다. Cache Components

Vercel 대시보드에서 해당 페이지는 어떤 요청이 정적 콘텐츠, 동적 콘텐츠, 또는 두 가지의 조합을 제공하고 있는지 보여줍니다. 이를 사용하여 정적 셸 (static shells)이 제대로 작동하는지 확인하고, 완전히 동적으로 퇴보한 라우트를 찾아내며, 함수 (functions)가 언제 실행되는지 확인할 수 있습니다. PPR 관측성 (PPR Observability)

더 자세히 파고들어야 한다면, ISR 또는 Functions 관측성 페이지를 클릭하여 캐시 재검증 (cache revalidations) 또는 함수 실행 (function executions)에 대한 세부 정보를 확인하세요.

Next.js 16.3은 오늘 바로 사용할 수 있습니다. 새로운 기능들을 활용하려면 업그레이드하세요:

pnpm add next@16.3.0

전체 릴리스 노트 (release notes)를 읽거나 .에 대해 더 자세히 알아보세요.Next.js 16.3 announcementNext.js on Vercel

더 읽어보기

• : 16.2에서 16.3으로 업그레이드한 앱들은 평균적으로 prefetch 요청이 45% 감소했으며, 일부는 70% 이상의 감소를 보였습니다.prefetch 요청 감소

• : 불변 정적 자산 (immutable static assets)을 통해, 업그레이드된 앱은 CDN 요청이 17% 감소하고 정적 콘텐츠의 전송 바이트가 24% 감소했으며, 빈번하게 배포되는 프로젝트의 경우 전역 TTFB가 최대 60%까지 감소했습니다.정적 자산 비용 절감

• : 핵심 서빙 경로 (critical serving path)에서의 라우팅 메타데이터 개선으로 대규모 사이트에서 p99 라우트 분해 (route resolution) 속도가 약 2배 빨라졌습니다.대규모 환경에서의 더 빠른 라우팅

플랫폼 개선 사항

지금 업그레이드하세요

불변 정적 자산 (Immutable static assets)

대규모 환경에서의 더 빠른 라우팅

개선된 관찰 가능성 (Improved observability)