Nuxt 4.5·Vue 3.6 전환: 빌드·SSR 검증 체크포인트 | Nuxt 4.5 and Vue 3.6 Migration

요약: 최근 72시간의 Nuxt·Vue 프론트엔드 생태계에서 가장 큰 변화는 Nuxt 4.5의 Vite 8 기반 전환과 Nuxt 5 준비, Vue 3.6 RC의 Vapor/반응성 재구성, 그리고 SSR·hydration 안정성 패치의 동시 진행이다. Nuxt 개발팀은 지금 ‘일괄 업그레이드’보다 lockfile, 커스텀 빌드 플러그인, SSR 응답 규칙을 함께 검증하는 단계적 전환을 권장할 근거가 충분하다.

3일 결론

핵심 답변: Nuxt 4.5는 즉시 전사 기본값으로 올리기보다 Vite 8·Unhead 3·Unctx 3 호환성과 SSR 회귀를 확인할 수 있는 staging 후보로 다뤄야 한다. Nuxt 3 사용자는 3.21.9 패치로 CSS·SSR·Nitro 회귀를 먼저 줄이고, 2026년 7월 31일 EOL 전에 Nuxt 4 전환을 계획하는 것이 현실적이다. Vue 3.6 RC/Vapor와 Nuxt의 SSR streaming은 성능 실험에는 유망하지만, 둘 다 범위를 제한한 canary와 관측 지표가 선행돼야 한다.

확인된 사실: 7월 18일 Nuxt 4.5.0·Nuxt 3.21.9와 Vue 3.6.0-rc.1이 공개됐고, 7월 19일 Unhead 3.2.1이 릴리스됐다. 해석: 빌드 레이어·head 관리·반응성·SSR 출력이 동시에 움직이는 전환 구간이다. 적용 원칙: 새 기능을 한 번에 켜지 말고, 의존성 트리와 실제 SSR HTML을 같은 배포 후보에서 확인한다.

이번 3일에 확인한 6개 핵심 이슈

Nuxt 4.5.0: Vite 8, Unhead v3, Unctx v3와 tsdown 기반 빌드 계약을 포함한 minor 릴리스.
Nuxt 4.5의 실험 기능: SSR streaming, 공유 file watcher, prefetch preload hints 및 안정 오류 코드.
Nuxt 3.21.9: lazy component CSS·server page CSS·nested Nitro layers·hydration 이후 갱신 등을 수정한 유지보수 패치.
Vue 3.6.0-rc.1: Vapor Mode 기능 완성과 alien-signals 기반 @vue/reactivity 재구성. 사전 릴리스다.
Vue 3.5.40: hydration, server renderer, lazy hydration, reactivity 관련 안정 버그 수정.
Unhead 3.2.0/3.2.1: 3.2.0의 Nuxt mixed-major 호환 수정과 3.2.1의 SSR mutation target 보존 수정.

1. Nuxt 4.5: Nuxt 5 준비와 Vite 8 전환은 하나의 검증 단위다

사실: Nuxt 4.5.0 공식 릴리스는 Vite 8, Unhead v3, Unctx v3를 채택하고 프레임워크 자체 빌드를 tsdown으로 옮겼다. Nuxt 팀은 이를 Nuxt 5와의 내부 격차를 줄이는 작업으로 설명하며, future.compatibilityVersion: 5로 일부 breaking change를 미리 시험할 수 있다고 안내한다.

시사점: Nuxt 의존성만 바뀌는 패치가 아니다. 직접 의존하는 Vite 플러그인, vite.config 조정, Vite 버전을 고정한 플러그인, 그리고 Unhead의 더 엄격한 useHead 타입이 한 번에 영향을 받을 수 있다. 릴리스 노트는 대부분의 앱에 투명한 전환을 목표로 하지만, Vite 8은 major이므로 production 승격 전에 호환성을 확인하라고 명시한다.

실무 적용: lockfile과 타입 검사를 함께 본다

새 브랜치에서 npx nuxt upgrade --dedupe를 실행한 뒤, pnpm why vite unhead unctx 또는 사용하는 패키지 관리자의 동등 명령으로 중복·override를 기록한다. 이어 nuxt typecheck, production build, Nitro 기동, 대표 SSR URL의 HTML·canonical·head 태그·hydration 콘솔 오류를 같은 lockfile 기준으로 비교한다. useHead 입력을 느슨한 타입으로 사용하던 코드는 Unhead v3에서 타입 오류가 실제 설정 문제를 드러내는 신호일 수 있으므로 무시하지 않는다.

2. SSR streaming은 TTFB 실험이지 기본 스위치가 아니다

사실: Nuxt 4.5에는 experimental.ssrStreaming이 추가됐다. HTML shell을 먼저 flush하고 Vue 렌더링과 함께 body를 전송하며, bot/crawler에는 완전 렌더 HTML을 제공하도록 설계됐다. 다만 첫 바이트가 나가면 이후의 status·header·cookie 변경은 클라이언트에 전달되지 않는다. redirect, cache, ISR, SWR, noScripts, ssr: false route rule에는 buffered renderer fallback이 적용된다.

시사점: 콘텐츠 페이지의 TTFB를 개선할 가능성은 있지만, 응답을 늦게 바꾸는 middleware·setResponseStatus()·cookie 쓰기 흐름을 가진 앱에는 route 단위 검증이 필요하다. 이는 성능 주장으로 일반화할 단계가 아니라, 공식 experimental 문서의 fallback 규칙을 기준으로 한 가설 검증 대상이다.

실무 적용: 한 route, 두 지표, 명시적 롤백

검색 유입이 큰 읽기 전용 route 하나에만 활성화하고 buffered baseline과 TTFB·LCP·5xx·hydration error를 비교한다. 로그인, redirect, A/B cookie, 개인화 cache가 걸린 route는 제외한다. 응답 header와 cookie를 end-to-end로 캡처하고, 누락 또는 cache key 혼선을 발견하면 해당 route의 streaming: false로 즉시 되돌린다.

3. Nuxt 3.21.9: CSS·SSR·Nitro 회귀를 줄이는 마지막 유지보수 흐름

사실: Nuxt 3.21.9는 Vite fallback, #components에서 lazy import한 컴포넌트의 inline CSS, inlineStyles를 끈 server page CSS 추출, nested layer의 Nitro transform, ssr: false의 styles object, hydration 이후 데이터 갱신 등을 수정한다. 같은 Nuxt 4.5 릴리스 노트는 Nuxt 3 EOL을 2026년 7월 31일로 명시하며, 3.21.9가 4.5의 호환 가능한 버그 수정을 backport한다고 설명한다.

시사점: Nuxt 3을 당장 종료할 수 없는 팀에도 ‘그대로 유지’가 아니라 CSS 전달과 SSR 출력의 회귀를 줄일 maintenance window가 남아 있다. 그러나 Vite 8·Rspack 2·Unhead 3의 major 전환은 v4 전용이므로 3.x에 새 build stack을 강제로 주입하지 않는 편이 안전하다.

실무 적용: 눈에 보이는 CSS와 서버 출력으로 회귀를 잡는다

3.21.9 후보에서는 lazy component가 있는 route, inlineStyles: false route, nested layer를 쓰는 route, ssr: false route를 Playwright와 curl로 나눠 검사한다. HTML의 stylesheet link, 첫 paint, client navigation, hydration warning, prerender cache 파일 생성까지 확인한다. 실패하면 lockfile과 이전 Nitro 산출물을 함께 되돌려 원인을 분리한다.

4. Vue 3.6 RC: Vapor와 reactivity 개선은 ‘선택적 실험’으로 시작한다

사실: Vue 3.6.0-rc.1은 Vapor Mode의 의도한 feature set이 완료돼 RC에 진입했다고 밝힌다. 또한 alien-signals 기반 @vue/reactivity 대규모 재구성으로 반응성 성능과 메모리 사용이 개선된다고 설명한다. Vapor는 SFC의 baseline bundle을 줄이고 성능을 높이려는 opt-in 컴파일 모드지만, Options API, app.config.globalProperties, 일부 instance proxy/VNode 의존 기능을 지원하지 않는다.

해석: RC는 배포 안정판이 아니다. 특히 Nuxt 앱에서 렌더 함수·JSX·VDOM 기반 UI 라이브러리·복잡한 slot/hydration을 사용하는 경우 Vapor와 VDOM interop은 bundle 이득을 상쇄하거나 edge case를 만들 수 있다. 공식 노트도 성능 민감 페이지의 부분 사용 또는 작은 신규 앱에서의 사용을 권장하고, 혼합 중첩을 줄이라고 안내한다.

실무 적용: 컴포넌트 경계를 고르고 비교한다

Options API나 instance proxy에 의존하지 않는 독립적 목록·대시보드 컴포넌트 하나를 후보로 고른다. 동일 사용자 시나리오에서 client bundle, INP, memory, SSR hydration warning을 VDOM baseline과 비교한다. stopPropagation()에 의존하는 이벤트와 slot을 ‘미리 실행해 검사’하는 패턴은 Vapor의 event delegation/slot 실행 규칙과 충돌할 수 있으므로 전용 e2e fixture를 추가한다.

5. 안정 패치와 head 관리: Vue 3.5.40·Unhead 3.2.1도 같이 확인한다

사실: Vue 3.5.40 changelog에는 dynamic props hydration namespace, detached root lazy hydration, optimized component server render 오류, SSR comment escaping, effect scope stop 등의 수정이 포함됐다. 7월 19일 Unhead 3.2.0은 Nuxt 빌드에서 mixed Unhead major를 허용하는 수정을, 뒤이은 3.2.1은 head.ssr mutation target을 보존하는 수정을 릴리스했다.

시사점: Nuxt 4.5의 Unhead v3 전환을 검토하는 팀은 head 태그만 확인해서는 부족하다. 서버가 만든 title/meta/canonical/structured data와 client navigation 뒤의 head diff, 그리고 기존 모듈이 가져오는 Unhead major가 혼합되지 않는지를 같은 smoke test에서 확인해야 한다.

프론트엔드 개발자 체크리스트

P0 — 의존성: Nuxt 4.5 또는 3.21.9 후보를 별도 브랜치에 설치하고 lockfile diff, Node 버전, Vite/Unhead/Unctx 중복을 기록한다.
P0 — build: typecheck → clean production build → Nitro 기동을 CI 하나의 job으로 묶고, build cache를 비운 실행도 한 번 확인한다.
P0 — SSR: 대표 public route와 authenticated route에서 status, cache-control, set-cookie, canonical, og/meta, HTML stylesheet, hydration console을 비교한다.
P1 — CSS: lazy component, route-level code splitting, inlineStyles: false, nested Nuxt layer의 첫 paint와 navigation CSS를 스냅샷으로 남긴다.
P1 — 실험 기능: SSR streaming/Vapor는 한 route 또는 한 컴포넌트로 한정하고 성능·오류·롤백 기준을 PR에 적는다.
P1 — 수명주기: Nuxt 3 프로젝트는 7월 31일 EOL 이전에 module inventory, custom Vite config, migration owner와 일정을 확정한다.

자주 묻는 질문

Nuxt 4.5로 바로 production 업그레이드해도 되나?

아니다. 공식 릴리스는 Vite 8과 Unhead v3 같은 major 의존성 전환을 포함한다. 커스텀 플러그인·설정·head 타입·SSR 응답을 staging에서 검증한 뒤 canary로 승격하는 편이 적절하다.

SSR streaming을 켜면 모든 페이지가 빨라지나?

보장할 수 없다. 이는 experimental 기능이며 route의 응답 변경 방식, crawler 처리, cache/redirect 규칙에 따라 buffered fallback이 적용된다. TTFB와 사용자 경험 지표를 실제 트래픽 조건에서 비교해야 한다.

Vue 3.6 RC Vapor를 Nuxt 전체에 적용해야 하나?

아니다. Vapor는 opt-in이며 Options API와 VNode/public instance 의존 기능에 제약이 있다. 성능 민감한 작은 영역부터 상호운용·hydration 테스트를 거쳐 판단한다.

출처 및 확인 범위

이 보고서는 2026년 7월 17일~20일 KST에 확인한 공식 릴리스와 공식 문서를 기준으로 작성했다. Vue 3.6.0-rc.1과 SSR streaming은 각각 pre-release/experimental 상태이며 안정판 기능처럼 서술하지 않았다. Vite 8.1.5는 72시간 창 직전의 최신 안정 패치이므로 Nuxt 4.5의 Vite 8 전환을 검증할 때의 현행 기준으로만 참고한다.

더 깊게 읽기: 실전 가이드

이 리포트는 최근 흐름을 빠르게 파악하기 위한 요약입니다. 실제 프로젝트에 적용할 때는 아래의 기준 글과 함께 확인하면 더 안전합니다.