Front-End/Vue.js

Nuxt (version 3) concept에 대해

태나미 2022. 5. 7. 14:22
Nuxt js 공식 홈페이지에서 공부하면서 번역한 것 글을 정리해보겠습니다. Nuxt 3 버전인 점 참고해주세요.

What is Nuxt?

  • Nuxt의 목표는 뛰어난 개발자 경험을 염두에 두고 직관적이고 성능이 뛰어난 웹 개발을 만드는 것입니다.

Why Nuxt?

Nuxt가 무엇인지 이해하려면 최신 애플리케이션을 만드는 데 필요한 사항을 이해해야 합니다.

 

  • reactivity 및 web components를 사용할 수 있는 JavaScript 프레임워크인 Vue.js를 선택했습니다.
  • 개발 중 핫 모듈 교체를 지원하고 프로덕션용 코드를 번들로 제공하는 번들러인 webpack 5와 Vite를 모두 지원합니다.
  • 레거시 브라우저를 지원하면서 최신 JavaScript 구문을 작성하는 변환기인 esbuild를 사용합니다.
  • 개발 중인 애플리케이션을 제공할 뿐만 아니라 서버 측 렌더링 또는 API 경로를 지원하기 위해 Nuxt는 h3를 사용하여 서버리스, 작업자, Node.js 및 탁월한 성능과 같은 배포 다양성을 제공합니다.
  • 클라이언트 측 탐색을 처리하는 라우팅 라이브러리인 vue-router를 선택했습니다.

또한 Nuxt js는 Vue 애플리케이션에 최고의 최적화와 성능을 제공합니다.

Nuxt는 이를 처리하므로 웹 애플리케이션 생성에 집중할 수 있습니다. 이 설정 외에도 Nuxt는 구성이 아닌 생성에 집중할 수 있도록 특정 기능에 중점을 둔 디렉터리 구조를 제공합니다.

Feature Comparison v2 ~ v3

Vue.js Development

Nuxt는 Vue를 프론트엔드 프레임워크로 사용하고 component auto-imports 및 파일 기반 라우팅과 같은 기능을 추가합니다. Nuxt 3는 Nuxt 사용자를 위한 새로운 패턴을 가능하게 하는 Vue의 새로운 주요 릴리스인 Vue 3을 통합합니다.

Vue with Nuxt

  • Single File Component
    • Vue의 단일 파일 구성 요소(SFC 또는 *.vue 파일)는 Vue component의 마크업(<template>), 논리(<script>) 및 스타일 지정(<style>)을 캡슐화합니다. Nuxt는 원활한 개발자 경험을 제공하는 Hot Module Replacement를 통해 SFC에 대해 구성이 필요 없는 경험을 제공합니다.
  • Components auto-imports
    • Nuxt 프로젝트의 components/directory 생성된 모든 Vue component는 import 할 필요 없이 프로젝트에서 사용할 수 있습니다. component가 어디에도 사용되지 않으면 프로덕션 코드에 포함되지 않습니다.
  • Vue Router
    • 대부분의 애플리케이션에는 여러 페이지와 페이지 사이를 탐색하는 방법이 필요합니다. 이를 라우팅이라고 합니다. Nuxt는 페이지/디렉토리 및 명명 규칙을 사용하여 공식 Vue Router 라이브러리를 사용하여 파일에 매핑된 경로를 직접 생성합니다.

Nuxt 3만의 특별한 점

Nuxt 3는 Vue 3을 기반으로 합니다. 새로운 주요 Vue 버전은 Nuxt가 활용하는 몇 가지 변경 사항을 소개합니다.

 

  • Better performance
  • Composition API
  • TypeScript support

Faster rendering

  • VDOM(Vue Virtual DOM)은 처음부터 다시 작성되었으며 더 나은 렌더링 성능을 제공합니다. 게다가 컴파일된 단일 파일 구성 요소(SFC)로 작업할 때 Vue 컴파일러는 정적 및 동적 마크업을 분리하여 빌드 최적화할 수 있습니다.
  • 따라서 첫 번째 렌더링(component 생성 시) 및 업데이트가 빨라지고 메모리 사용량이 줄어듭니다. Nuxt 3에서는 더 빠른 서버 측 렌더링도 가능합니다.

Smaller bundle

  • Vue 3 및 Nuxt 3에서는 번들 크기 축소에 중점을 두었습니다. 버전 3에서는 템플릿 지시문 및 내장 component를 포함한 대부분의 Vue 기능이 트리를 흔들 수 있습니다. 사용하지 않으면 프로덕션 번들에 포함되지 않습니다.
  • 이렇게 하면 최소한의 Vue 3 애플리케이션을 12kb gzip으로 줄일 수 있습니다.

Composition API

  • Vue 2에서 component의 데이터와 논리를 제공하는 유일한 방법은 데이터 및 메서드와 같은 미리 정의된 속성이 있는 템플릿에 데이터와 메서드를 반환할 수 있는 옵션 API를 사용하는 것이었습니다
// Vue 2
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}
</script>
  • Vue 3에 도입된 Composition API는 Options API를 대체하는 것은 아니지만 애플리케이션 전체에서 더 나은 논리 재사용을 가능하게 하고 복잡한 component에서 관심사별로 코드를 그룹화하는 보다 자연스러운 방법입니다.
  • <script> 정의에서 setup 키워드와 함께 사용되는 코드는 Composition API 및 Nuxt 3의 auto-imported Reactivity APIs로 다시 작성되었습니다.
// Vue 3
<script setup>
  const count = ref(0);
  const increment = () => count.value++;
</script>

TypeScript support

Vue 3와 Nuxt 3은 모두 TypeScript로 작성되었습니다. 완전한 형식의 코드베이스는 실수를 방지하고 API 사용을 문서화합니다. 그렇다고 해서 TypeScript를 활용하기 위해 애플리케이션을 작성해야 한다는 의미는 아닙니다. Nuxt 3에서는 파일 이름을 .js에서 .ts로 변경하거나 component에 <script lang="ts">를 추가하여 옵트인할 수 있습니다.

Rendering Modes

브라우저와 서버 모두 JavaScript 코드를 해석하여 Vue.js component를 HTML 요소로 렌더링할 수 있습니다. 이 단계를 렌더링이라고 합니다. Nuxt는 클라이언트 측 및 범용 렌더링을 모두 지원합니다. 두 가지 접근 방식에는 이 섹션에서 다룰 장단점이 있습니다.

Client-side only rendering

기본적으로 기존 Vue.js 애플리케이션은 브라우저(또는 클라이언트)에서 렌더링 됩니다. 그런 다음 Vue.js는 브라우저가 현재 인터페이스를 만들기 위한 지침이 포함된 모든 JavaScript 코드를 다운로드하고 구문 분석한 후 HTML 요소를 생성합니다.

장점

  • Development speed: 전적으로 클라이언트 측에서 작업할 때 창 개체와 같은 브라우저 전용 API를 사용하여 코드의 서버 호환성에 대해 걱정할 필요가 없습니다.
  • Cheaper: 서버를 실행하면 JavaScript를 지원하는 플랫폼에서 실행해야 하므로 인프라 비용이 추가됩니다. HTML, CSS 및 JavaScript 파일이 있는 모든 정적 서버에서 클라이언트 전용 애플리케이션을 호스팅 할 수 있습니다.
  • Offline: 코드가 완전히 브라우저에서 실행되기 때문에 인터넷을 사용할 수 없는 동안에도 계속 작동할 수 있습니다.

단점

  • Performance: 사용자는 브라우저가 JavaScript 파일을 다운로드, 구문 분석 및 실행할 때까지 기다려야 합니다. 다운로드 부분의 네트워크와 구문 분석 및 실행을 위한 사용자 장치에 따라 다소 시간이 걸리고 사용자 경험에 영향을 줄 수 있습니다.
  • Search Engine Optimization: 클라이언트 측 렌더링을 통해 전달된 콘텐츠를 색인화하고 업데이트하는 것은 서버에서 렌더링 된 HTML 문서보다 시간이 더 걸립니다. 이것은 검색 엔진 크롤러가 페이지 인덱싱을 처음 시도할 때 인터페이스가 완전히 렌더링될 때까지 기다리지 않기 때문에 우리가 논의한 성능 단점과 관련이 있습니다. 순수한 클라이언트 측 렌더링을 사용하면 콘텐츠가 검색 결과 페이지에 표시되고 업데이트되는 데 더 많은 시간이 걸립니다.

Universal rendering

브라우저가 범용(클라이언트 측 + 서버 측) 렌더링이 활성화된 URL을 요청하면 서버는 완전히 렌더링된 HTML 페이지를 브라우저에 반환합니다. 페이지가 미리 생성되어 캐시되거나 즉석에서 렌더링되는지 여부에 관계없이 Nuxt는 서버 환경에서 JavaScript(Vue.js) 코드를 실행하여 HTML 문서를 생성한 적이 있습니다. 사용자는 클라이언트 측 렌더링과 달리 애플리케이션의 콘텐츠를 즉시 얻습니다.

HTML 문서가 다운로드되면 백그라운드에서 서버에서 실행되는 자바스크립트 코드를 로드합니다. 브라우저는 그것을 다시 해석하고(따라서 유니버설 렌더링) Vue.js는 문서를 제어하고 상호 작용을 활성화합니다. 브라우저에서 정적 페이지를 대화형으로 만드는 것을 "Hydration"라고 합니다.

장점

  • Performance: 브라우저는 JavaScript 생성 콘텐츠보다 훨씬 빠르게 정적 콘텐츠를 표시할 수 있으므로 사용자는 페이지 콘텐츠에 즉시 액세스 할 수 있습니다. 동시에 Nuxt는 수화 프로세스가 발생할 때 웹 애플리케이션의 상호 작용을 유지합니다.
  • Search Engine Optimization: 범용 렌더링은 페이지의 전체 HTML 콘텐츠를 브라우저에 클래식 서버 응용 프로그램으로 제공합니다. 웹 크롤러는 페이지의 콘텐츠를 직접 인덱싱할 수 있으므로 유니버설 렌더링은 빠르게 인덱싱 하려는 콘텐츠에 대해 탁월한 선택입니다.

단점

  • Development constraints: 서버 및 브라우저 환경은 동일한 API를 제공하지 않으며, 양쪽에서 원활하게 실행할 수 있는 코드를 작성하는 것이 까다로울 수 있습니다. 다행히 Nuxt는 코드가 실행되는 위치를 결정하는 데 도움이 되는 지침과 특정 변수를 제공합니다.
  • Cost: 즉석에서 페이지를 렌더링 하려면 서버를 실행해야 합니다. 이것은 기존 서버와 마찬가지로 월별 비용을 추가합니다. 그러나 브라우저가 클라이언트 측 탐색을 대신하는 범용 렌더링 덕분에 서버 호출이 크게 줄어듭니다.

요약

클라이언트 측 렌더링과 범용 렌더링은 브라우저에 인터페이스를 표시하는 다른 전략입니다.

기본적으로 Nuxt는 범용 렌더링을 사용하여 더 나은 사용자 경험과 성능을 제공하고 검색 엔진 인덱싱을 최적화하지만 한 줄의 구성에서 렌더링 모드를 전환할 수 있습니다.

 

출처

- https://v3.nuxtjs.org/

- https://nuxtjs.org/