지난 7월 15일, Nuxt 4가 정식으로 출시되었습니다.

이번 버전은 개발자 경험(DX)을 중심으로 한 주요 업데이트를 포함하고 있으며, 프로젝트 구조 개선, 데이터 패칭 성능 향상, TypeScript 지원 강화, CLI 속도 개선 등 여러 변화가 적용되었습니다.

주요 변경사항을 확인해보겠습니다

주요 변경 사항

1. 프로젝트 구조 변경 (app/ 디렉토리 도입)

Nuxt 3

Nuxt 3에서는 pages/, components/, layouts/ 등의 디렉토리가 프로젝트 최상위에 존재하며, 모든 코드가 동일한 레벨에서 관리되었습니다.

├── pages/
├── components/
├── layouts/
├── store/

🚀 Nuxt 4

Nuxt 4에서는 app/ 디렉토리가 도입되었고, 기존의 pages/, components/, layouts/ 디렉토리가 app/ 아래로 이동하여 클라이언트와 서버 코드를 명확하게 구분할 수 있게 되었습니다.

├── app/
    ├── pages/
    ├── components/
    ├── layouts/
    ├── store/

2. 서버 코드와 클라이언트 코드 분리

Nuxt 3

서버와 클라이언트 컴포넌트를 혼합하여 사용할 수 있었으나, import.meta.client 등을 사용하여 환경에 맞는 코드를 직접 분기 처리해야 했습니다.

if (import.meta.client) {
  // 클라이언트에서만 실행될 코드 작성
}

또는

// test.client.js
console.log('클라이언트에서만 실행되는 코드입니다');

🚀 Nuxt 4

Nuxt 4에서는 디렉토리 구조를 통해 서버 코드와 클라이언트 코드를 명확히 분리합니다.
client/ 디렉토리에는 클라이언트 전용 코드, server/ 디렉토리에는 서버 전용 코드가 포함됩니다.
Nuxt는 실행 환경에 맞게 자동으로 코드를 실행합니다.

├── app/
    ├── client/    # 클라이언트 전용 코드
    ├── server/    # 서버 전용 코드

• client/ 디렉토리: 클라이언트에서만 필요한 자바스크립트 코드나 라이브러리, 클라이언트 전용 컴포넌트 등 (브라우저 관련 코드, 클라이언트 전용 상태 관리, 이벤트 핸들러 등)
• server/ 디렉토리: 서버에서만 실행되어야 하는 로직 (서버 사이드 데이터 패칭, API 호출, 서버 전용 로직 등)

3. 데이터 패칭 및 관리 (useAsyncData, useFetch 개선)

Nuxt 3

Nuxt 3에서는 useAsyncData와 useFetch를 사용하여 데이터를 패칭할 수 있었지만, 캐시 및 자동 정리 메커니즘은 사용자가 설정해야 했습니다.

const { data, error } = useAsyncData('posts', () =>
  fetch('/api/posts').then(res => res.json())
)

🚀 Nuxt 4

Nuxt 4에서는 useAsyncData와 useFetch의 캐시 및 자동 정리 메커니즘이 개선되었습니다.
이제 데이터 패칭 후 상태 업데이트가 더욱 스마트하게 처리됩니다.
캐시된 데이터를 자동으로 사용할 수 있으며, 주기적으로 데이터를 갱신하거나 강제로 갱신할 수 있는 기능도 추가되었습니다.

const { data, error, refresh } = useAsyncData('posts', () =>
  fetch('/api/posts').then(res => res.json()), {
  cache: true,           // 자동 캐시 관리
  revalidate: 60000,     // 1분마다 데이터 갱신
})

4. TypeScript 지원 향상

shared/ 디렉토리 내의 코드를 비롯하여 서버와 클라이언트 코드가 명확히 구분되며, TypeScript 설정이 자동으로 최적화됩니다.

├── app/
│   ├── client/
│   ├── server/
│   ├── shared/
│       ├── utils/          # 유틸리티 함수들
│       ├── types/          # 공통 타입 정의
│       ├── constants/      # 상수값들
│       ├── services/       # 공통 서비스 코드
│       └── hooks/          # 클라이언트/서버 공통 훅

5. 빠른 CLI와 개발 환경

내부 소켓 통신을 채택하여 개발 서버 시작 시간이 빨라졌고, V8 컴파일 캐시를 자동으로 재사용하며, fs.watch API를 사용하여 시스템 자원을 절약합니다.
이로 인해 빌드 속도와 페이지 로딩 속도가 더욱 빨라졌습니다.

• 빠른 콜드 스타트 - 개발 서버 시작 시간이 눈에 띄게 빨라졌습니다.
• Node.js 컴파일 캐시 - V8 컴파일 캐시가 자동으로 재사용됩니다.
• 네이티브 파일 감지 - fs.watch API를 사용하여 시스템 자원 소모를 줄였습니다.
• 소켓 기반 통신 - CLI와 Vite 개발 서버가 이제 네트워크 포트 대신 내부 소켓을 통해 통신하여 오버헤드를 줄였습니다. (특히 Windows에서 성능 향상)

6. 더 나은 디버깅 및 로깅

devtools가 기본적으로 활성화되어 개발 중에 더 많은 정보를 쉽게 추적하고, 코드 실행 상태를 실시간으로 확인할 수 있습니다.

개인적인 소감

개인적으로 이번 릴리즈에서 Nuxt 4의 폴더 구조 변경이 가장 큰 장점으로 느껴졌습니다. 코드 구조가 더욱 직관적이어서 유지보수와 협업에 훨씬 유리한 형태로 개선되었습니다.
dev tools같은 몇몇 기능은 Nuxt 4에서 공식적으로 도입되기 이전에 Nuxt 3의 마이너 릴리즈에서 이미 제공되었기 때문에 익숙하게 받아들일 수 있었습니다.

Vue2에서 3으로의 전환은 마치 프레임워크를 새로 배우는 수준의 변화였다면, Nuxt 3에서 4로의 전환은 기존 개발 흐름을 유지하면서도 보다 정돈되고 개선된 경험을 제공하는 업데이트인 느낌이네요.

출처
https://nuxt.com/blog/v4
https://github.com/nuxt/nuxt/releases/tag/v4.0.0