Nuxt는 Vue.js를 사용하여 타입 안전하고, 성능이 뛰어나며, 프로덕션 수준의 풀스택 웹 애플리케이션과 웹사이트를 직관적이고 확장 가능한 방식으로 만들 수 있는 무료 오픈 소스 프레임워크입니다.

개발 중에는 핫 모듈 교체를 즐기고, 프로덕션에서는 기본적으로 서버 사이드 렌더링을 통해 성능이 뛰어난 애플리케이션을 제공할 수 있도록 모든 것을 준비했습니다. .vue 파일을 처음부터 작성할 수 있습니다.

Nuxt는 벤더 종속이 없으며, 애플리케이션을 어디서든, 심지어 엣지에서도 배포할 수 있습니다.

자동화 및 규칙

Nuxt는 규칙과 의견이 반영된 디렉토리 구조를 사용하여 반복적인 작업을 자동화하고 개발자가 기능 개발에 집중할 수 있도록 합니다. 설정 파일은 여전히 기본 동작을 사용자 정의하고 재정의할 수 있습니다.

• 파일 기반 라우팅: pages/ 디렉토리의 구조에 따라 라우트를 정의합니다. 이를 통해 애플리케이션을 더 쉽게 구성하고 수동 라우트 구성을 피할 수 있습니다.
• 코드 분할: Nuxt는 자동으로 코드를 더 작은 청크로 분할하여 애플리케이션의 초기 로드 시간을 줄일 수 있습니다.
• 기본 제공 서버 사이드 렌더링: Nuxt는 내장된 SSR 기능을 제공하므로 별도의 서버를 설정할 필요가 없습니다.
• 자동 임포트: Vue 컴포저블과 컴포넌트를 해당 디렉토리에 작성하고, 트리 쉐이킹과 최적화된 JS 번들의 이점을 누리면서 임포트 없이 사용할 수 있습니다.
• 데이터 페칭 유틸리티: Nuxt는 SSR 호환 데이터 페칭 및 다양한 전략을 처리할 수 있는 컴포저블을 제공합니다.
• 제로 설정 TypeScript 지원: 자동 생성된 타입과 tsconfig.json을 통해 TypeScript를 배우지 않고도 타입 안전한 코드를 작성할 수 있습니다.
• 구성된 빌드 도구: 개발 중 핫 모듈 교체(HMR)를 지원하고, 프로덕션을 위한 코드 번들링을 위해 기본적으로 Vite를 사용합니다.

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/의 파일을 읽어 서버 API를 생성하고 server/middleware/에서 서버 미들웨어를 생성합니다.

프로덕션에서는 Nitro가 앱과 서버를 하나의 범용 .output 디렉토리로 빌드합니다. 이 출력물은 가볍고, 최소화되어 있으며, Node.js 모듈(폴리필 제외)에서 제거됩니다. 이 출력물은 Node.js, 서버리스, 워커, 엣지 사이드 렌더링 또는 순수 정적 환경을 지원하는 모든 시스템에 배포할 수 있습니다.

프로덕션 준비 완료

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

모듈식

모듈 시스템을 통해 Nuxt를 사용자 정의 기능과 타사 서비스와의 통합으로 확장할 수 있습니다.

아키텍처

Nuxt는 다양한 코어 패키지로 구성되어 있습니다:

• 코어 엔진: nuxt
• 번들러: @nuxt/vite-builder, @nuxt/rspack-builder, @nuxt/webpack-builder
• 명령줄 인터페이스: @nuxt/cli
• 서버 엔진: nitro
• 개발 키트: @nuxt/kit

각 개념을 읽어 Nuxt의 기능과 각 패키지의 범위를 완전히 이해하는 것을 권장합니다.