[Vue3] Nuxt.js 3

gminnimk·2025년 4월 1일

Vue3

목록 보기

38/39

Nuxt.js는 Vue.js 기반의 프레임워크로, 빠르고 효율적으로 웹 애플리케이션을 제작할 수 있도록 도와줍니다.

주요 역할은 개발자가 SPA(Single Page Application), SSR(Server Side Rendering), 또는 정적 사이트를 쉽게 구현할 수 있도록 Vuex, Vue Router, Axios 등 자주 쓰이는 라이브러리들을 미리 구성해두었다는 점.

Nuxt.js (Nuxt3) 개요

Nuxt.js는 Vue.js 기반의 프론트엔드 프레임워크로, 서버 사이드 렌더링(SSR)과 SPA(Client-side Rendering)의 장점을 동시에 취할 수 있게 해줍니다.
- 첫 페이지는 SSR을 통해 SEO(검색 엔진 최적화)에 유리한 HTML을 제공하고, 이후 페이지 이동은 nuxt-link를 통해 SPA처럼 빠르게 처리할 수 있습니다.
- 이로 인해 SEO 문제와 페이지 전환의 부드러움을 모두 해결할 수 있습니다.

Nuxt3의 주요 특징

1. Vue3 및 Composition API 지원

Nuxt3는 Vue3를 기반으로 하며, Composition API를 적극 활용합니다.
Composition API를 사용하면 TypeScript와의 호환성이 좋아지고, 코드의 재사용성과 가독성이 향상됩니다.

예제 코드:

<script setup lang="ts">
  // 반응형 데이터 정의 (ref)
  const count = ref<number>(1)
  // 계산된 속성 (computed)
  const double = computed<string>(() => count.value * 2 + '개')
  // 읽기 전용 데이터 (readonly)
  const readonlyCount = readonly(count)

  // 값 변경 시 콜백 실행 (watch)
  watch(count, (newVal, oldVal) => {
    console.log(newVal, oldVal)
  })

  // 데이터 업데이트 함수들
  const increaseCount = () => { count.value++ }
  const decreaseCount = () => { count.value-- }
</script>

2. Auto-imports 기능

Nuxt3는 Vue에서 자주 사용하는 ref, computed, watch 등과 Nuxt 전용 훅(예: useAsyncData, useFetch)을 자동으로 import 해줍니다.
기본적으로 /components, /composables, /utils 폴더에 있는 파일들도 자동으로 불러와집니다.
만약 명시적 import를 원한다면 다음과 같이 사용할 수 있습니다:
```
import { ref, computed } from '#imports'
```
또는 nuxt.config.ts에서 auto-import 기능을 비활성화할 수 있습니다.

3. Nitro Engine과 $fetch

Nuxt3는 서버 사이드 엔진으로 Nitro Engine(h3 기반)을 도입해 성능과 확장성을 높였습니다.
기존의 nuxt/axios나 nuxt/http 대신, ofetch 기반의 $fetch 함수를 사용하여 데이터를 비동기적으로 가져올 수 있습니다.

예제 코드:

const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains')
)

정리

Nuxt.js는 Vue.js 기반으로 SSR과 SPA의 장점을 모두 살린 프레임워크입니다.
Nuxt3에서는 Vue3의 Composition API를 사용하여 코드 작성이 더 쉽고, TypeScript와의 호환성도 강화되었습니다.
Auto-imports 기능으로 자주 쓰는 API를 별도 import 없이 사용할 수 있으며, Nitro Engine을 통해 서버 사이드 처리 성능이 향상되었습니다.

Nuxt.js 3의 추가 주요 특징

서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG): 초기 로딩 속도를 개선하고 SEO 최적화가 필요할 때, 서버에서 미리 렌더링한 HTML을 전달할 수 있습니다.
파일 기반 라우팅 & 레이아웃 관리: pages/ 폴더 구조를 통해 라우팅을 자동으로 설정하고, layouts/를 이용해 공통 레이아웃을 쉽게 적용할 수 있습니다.
자동 컴포넌트 임포트 및 내장 Composable: components/나 composables/ 폴더에 있는 파일을 자동으로 전역에서 사용할 수 있으므로 코드의 중복과 설정 부담을 줄여줍니다.
TypeScript 및 Vite 기본 지원: 최신 도구들을 기본으로 사용하여 빠른 빌드 속도와 타입 안전성을 제공합니다.

Nuxt.js 3를 적용하기 좋은 경우

SEO 및 초기 로딩 속도 개선이 필요한 경우:
- 콘텐츠 중심의 웹사이트(예: 블로그, 마케팅 사이트, 전자상거래 사이트)는 SSR이나 SSG를 통해 검색 엔진에 최적화된 HTML을 제공할 수 있으므로 Nuxt.js 3가 매우 유리합니다.
- 실제로 SSR 덕분에 사용자가 빠르게 콘텐츠를 볼 수 있으면서도, 하이드레이션을 통해 동적인 상호작용을 유지할 수 있습니다.
프로젝트 규모가 커지거나 복잡한 라우팅 및 레이아웃 관리가 필요한 경우:
- 파일 기반 라우팅과 레이아웃 기능 덕분에 페이지 구조 관리가 수월하며, 개발 생산성이 크게 향상됩니다.
- 특히 여러 페이지와 동적 라우팅(예: [id].vue나 blog-[id].vue)을 사용할 때 가독성과 유지보수가 용이합니다.
Vue 3의 최신 기능(Composition API 등)을 활용하고자 하는 경우:
- Nuxt.js 3는 Vue 3의 기능을 자연스럽게 통합하면서, 자동 임포트, 내장 훅(useFetch, useAsyncData 등)을 제공하여 개발 경험을 개선합니다.
빠른 개발 및 프로토타입 제작이 필요한 경우:
- Nuxt.js 3는 설정이 간소화되어 있고, 기본 제공되는 기능들이 많아 초기 설정에 소요되는 시간이 적습니다.
타입 안전성과 현대적 빌드 도구(Vite, TypeScript)를 적극 활용하려는 경우:
- Nuxt.js 3는 TypeScript와 Vite를 기본으로 지원하여, 빠르고 안정적인 개발 환경을 제공합니다.

Nuxt.js 3 적용 시 고려할 사항

프로젝트 요구사항 분석:

단순한 SPA로 충분하고 SEO나 초기 로딩 속도에 큰 제약이 없다면 굳이 Nuxt.js 3를 도입할 필요는 없습니다.
플러그인 및 모듈 호환성:

기존 Vue 3에서 사용하던 일부 라이브러리나 플러그인이 Nuxt.js 3 환경에서 별도 설정이나 교체가 필요할 수 있으므로 사전에 검토해야 합니다.
자동 임포트와 코드 명시성:

Nuxt는 많은 기능을 자동으로 임포트해주지만, 이로 인해 코드의 동작 원리를 처음 접하는 개발자에게는 혼란을 줄 수도 있습니다. 프로젝트 문서화나 팀 내부 가이드가 필요할 수 있습니다.

결론

Vue 3 단독으로 SPA를 만드는 경우에도 충분하지만, SEO 최적화, 빠른 초기 로딩 그리고 복잡한 라우팅 및 레이아웃 관리가 중요한 프로젝트에서는 Nuxt.js 3의 도입이 매우 효과적입니다. 또한 최신 개발 도구(Vite, TypeScript)와 통합되어 있어 생산성 및 유지보수 측면에서도 큰 이점을 제공합니다.