1. Nuxt 소개

Nuxt는 Vue.js 기반의 타입 세이프 하고 성능이 뛰어나며 프로덕션 수준의 풀 스택 웹 애플리케이션과 웹 사이트를 생성할 수 있는 직관적이고 확장 가능한 방법을 갖춘 무료 오픈 소스 프레임워크이다.

개발 시 핫 모듈 교체(HMR) 를 할 수 있으며 기본적으로 서버 측 렌더링을 통해 고성능 애플리케이션을 지원하여, 바로 .vue 소스 파일을 시작할 수 있도록 환경을 제공한다.

Nuxt는 공급업체에 종속되지 않으므로(Vendor lock in) 애플리케이션을 어디에나 배포할 수 있다.

 

자동화와 규칙

Nuxt는 디렉토리 구조를 사용하여 반복적인 작업을 자동화하고 개발자가 기능을 개발하는 데 집중할 수 있도록 한다. 특별한 변경이 필요할 때도 기본 동작을 사용자 정의하고 재정의할 수 있다.

• 파일 기반 라우팅 : pages/ 디렉터리 구조를 기반으로 경로를 정의한다 . 이렇게 하면 애플리케이션을 더 쉽게 구성할 수 있고 수동 경로 구성이 필요하지 않다.
• 코드 분할 : Nuxt는 자동으로 코드를 더 작은 덩어리로 분할하여 애플리케이션의 초기 로드 시간을 줄이는 데 도움이 될 수 있다.
• 즉시 사용 가능한 서버 측 렌더링: Nuxt에는 SSR 기능이 내장되어 있으므로 별도의 서버를 직접 설정할 필요가 없다.
• 자동 imports : Vue 컴포저블 및 구성요소를 해당 디렉토리에 작성하고 트리 쉐이킹 및 최적화된 JS 번들의 이점을 활용하여 import 필요 없이 사용한다.
• 데이터 페칭 유틸리티 : Nuxt는 SSR 호환 데이터 가져오기 및 다양한 전략을 처리할 수 있는 컴포저블을 제공한다.
• 구성이 필요 없는 TypeScript 지원 : 자동 생성된 타입들과 tsconfig.json 을 사용하여 TypeScript를 배울 필요 없이 타입 세이프한 코드를 작성할 수 있다.
• 구성된 빌드 도구 : 기본적으로 Vite를 사용하여 개발 시 핫 모듈 교체(HMR)를 지원하고 베스트 프랙티스를 적용하여 프로덕션용 코드를 번들화 할 수 있다.

 

Nuxt는 위에서 말한 장점 외에  프런트엔드 및 백엔드 기능을 모두 제공하므로 사용자는 웹 애플리케이션 개발 작업에 집중할 수 있게 해준다.

 

서버사이드 렌더링

Nuxt에는 기본적으로 서버 측 렌더링(SSR) 기능이 내장되어 있어 서버를 직접 구성할 필요 없이 웹 애플리케이션에 많은 이점을 제공한다.

• 더 빠른 초기 페이지 로드 시간 : Nuxt는 완전히 렌더링된 HTML 페이지를 브라우저에 보내 즉시 표시할 수 있다. 이는 특히 느린 네트워크나 장치에서 더 빠른 페이지 로드 시간과 더 나은 사용자 경험(UX)을 제공할 수 있다.
• 향상된 SEO : 클라이언트 측에서 컨텐츠를 렌더링하기 위해 JavaScript를 요구하는 대신 HTML 컨텐츠를 즉시 사용할 수 있으므로 검색 엔진은 SSR 페이지를 더 효과적으로 인덱싱할 수 있다.
• 저전력 장치에서 더 나은 성능 : 클라이언트 측에서 다운로드하고 실행해야 하는 JavaScript의 양을 줄여준다. 이는 무거운 JavaScript 애플리케이션을 처리하는 데 어려움을 겪을 수 있는 저전력 장치에 도움이 될 수 있다.
• 향상된 접근성 : 초기 페이지 로드 시 콘텐츠를 즉시 사용할 수 있으므로 화면 판독기나 기타 보조 기술을 사용하는 사용자의 접근성이 향상된다.
• 더욱 쉬워진 캐싱 : 페이지를 서버 측에서 캐싱할 수 있으므로 콘텐츠를 생성하고 클라이언트에 보내는 데 걸리는 시간을 줄여 성능을 더욱 향상시킬 수 있다.
• 전반적으로 서버 측 렌더링은 더 빠르고 효율적인 사용자 경험을 제공할 뿐만 아니라 검색 엔진 최적화 및 접근성을 향상시킬 수 있다.

 

Nuxt는 풍부한 기능의 프레임워크이므로 nuxt generate 를 사용하여 전체 애플리케이션을 정적 호스팅으로 렌더링하거나, ssr: false 옵션을 통해 SSR을 전역적으로 비활성화하거나, routeRules 옵션을 설정하여 하이브리드 렌더링을 활용할 수 있는 가능성을 제공한다.

 

서버 엔진

Nuxt 서버 엔진 Nitro는 새로운 풀 스택 기능을 제공한다.

개발 중에는 서버 코드 및 컨텍스트 격리를 위해 Rollup 및 Node.js 워커를 사용한다. 또한  server/api/ 의 파일과 server/middleware/ 의 서버 미들웨어를 읽어 서버 API를 생성한다.

프로덕션 환경에서 Nitro는 앱과 서버를 하나의 범용 .output 디렉터리에 구축한다. 이 결과물은 아주 간단하다. 모든 Node.js 모듈에서 최적화되었다(폴리필 제외). 이로 인해 JavaScript를 지원하는 모든 시스템에 이 결과물을 배포할 수 있다.

 

프러덕션 레디

Nuxt 애플리케이션은 Node 또는 Deno 서버에 배포하거나, 정적 환경에서 호스팅되도록 사전 렌더링하거나, 서버리스 및 엣지 제공업체에 배포할 수 있다.

 

모듈화

모듈 시스템을 사용하면 맞춤형 기능과 타사 서비스와의 통합을 통해 Nuxt를 확장할 수 있다.

 

아키텍쳐

• 코어 엔진: nuxt
• 번들러: @nuxt/vite-builder 및 @nuxt/webpack-builder
• 명령줄 인터페이스: nuxi
• 서버 엔진: Nitro
• 개발 키트: @nuxt/kit
• Nuxt 2 bridge: @nuxt/bridge