Vue.js 생태계의 패러다임 역시 끊임없이 진화해왔습니다. 브라우저에서 모든 것을 그리는 CSR(클라이언트 사이드 렌더링)에서 시작하여, 초기 로딩 속도와 SEO 문제를 해결하기 위한 전통적인 SSR(서버 사이드 렌더링)을 거쳐, 마침내 초경량 Nitro 엔진과 유연한 하이브리드 렌더링을 지원하는 Nuxt 4 아키텍처라는 최신 렌더링 모델에 도달했습니다.
Nuxt 4 아키텍처의 핵심 특징
초경량 Nitro 서버 엔진: Node.js 뿐만 아니라 Vercel Edge, Cloudflare Workers 등 어떤 환경이든 종속성 없이 초고속으로 배포가 가능합니다.
자동 임포트 (Auto-imports): ref, computed 같은 Vue 유틸리티나 커스텀 컴포넌트를 일일이 import 할 필요 없이 즉시 사용할 수 있습니다. (Zero-config)
하이브리드 렌더링 (Route Rules): 어떤 페이지는 SSR로, 어떤 페이지는 정적(SSG)으로, 라우트 경로별로 렌더링 방식을 유연하게 믹스할 수 있습니다.
nuxt.config.ts
// Nuxt 4의 루트 디렉토리에 위치하는 핵심 설정 파일입니다.
export default defineNuxtConfig({
// 1. Nuxt 4의 핵심! 새로운 폴더 구조 호환성을 위한 설정
// 향후 기본값이 될 예정이나 명시적으로 지정할 수 있습니다.
future: {
compatibilityVersion: 4,
},
// 2. 개발 도구 활성화 (브라우저 하단에 강력한 DevTools가 생성됨)
devtools: { enabled: true },
// 3. 환경 변수 관리 (프라이빗 토큰과 퍼블릭 설정 분리)
runtimeConfig: {
// 여기 적힌 값은 서버(SSR) 환경에서만 접근 가능합니다. (보안 유지)
apiSecretKey: process.env.NUXT_API_SECRET_KEY || 'default-secret',
// public 안에 적힌 값은 클라이언트(브라우저)에서도 접근 가능합니다.
public: {
apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
}
}
})