Nuxt.js 란?

Nuxt.js 란?

Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어주는 프레임워크이다.

말그대로 설명하면 프레임워크를 더 쉽게 사용하기 위해 만든 프레임워크라고 한다.

Nuxt.js의 등장배경

Nuxt.js가 등장한 배경에 대해 알기 위해서는 SPA와 CSR, SSR에 대해 알고 있어야 합니다.

단일 페이지 애플리케이션 - SPA(Single Page Application)
기존의 웹 서비스는 요청시마다 서버로부터 리소스와 데이터를 요청해서 화면에 렌더링하는 방식이었지만 SPA는 최초에 한번 페이지를 전체 로드하고 그 이후부터는 특정 부분에 대해서만 데이터를 바인딩하는 방식

Client측에서 렌더링을 한다고 CSR(Client Sid Rendering)이라고도 합니다. SPA는 필요, 변경된 데이터만 받아오기 떄문에 불필요한 렌더링 비용을 감소시킨다는 장점이 있지만, 초기 렌더링 시 js, css 파일들을 번들링 해야하기 때문에 초기 load 속도가 늦다는 단점이 있습니다. 또한 봇, 크롤러들이 번들링 된 js를 수집하는데 어려움이 있다고도 합니다.

SSR (Server Side Rendering)

SSR 은 Sever Side Rendering으로써 CSR의 반대가 되는 표현입니다. SSR은 CSR에 비해 초기 로드 속도가 빠르다는 장점이 있지만 SPA에 비해 서버 성능이 필요하고 페이지 이동시 새로운 load가 필요하다는 단점이 있습니다.

Angular, React, Vue SPA 삼대장들이 출시되고 나서, SPA의 단점들을 극복하고자 많은 노력들이 있었지만, 정통 SSR(MPA) 방식의 장점들을 완벽하게 커버하기란 불가능하였고 이를 극복하기 위해 Next.js(React 기반), Nuxt.js(Vue 기반) 등의 프레임워크가 등장했습니다.

Nuxt.js 에 포함된 기능

• Vue 2
• Vue Router
• Vuex (store 옵션을 사용하는 경우에만 포함)
• Vue Server Renderer (mode : ‘spa’를 사용하는 경우에는 제외)
• vue-meta

vue-loader와 babel-loader와 함께 Werpark을 사용해서 코드를 묶고, 분할하며, 압축한다.

라이프사이클

Nuxt는 렌더링 과정에서 Vue 인스턴스를 계속 다루고, 각 렌더링 과정에서만 동작하는 로직들 역시 정의되어 있습니다. 따라서 Nuxt의 렌더링 과정에서는 일반적인 Vue 인스턴스의 생명주기 훅과 Nuxt에서만 찾아볼 수 있는 독특한 생명주기 훅이 섞여서 호출됩니다. 활용도가 높고 중요한 몇가지 훅들을 동작 순서대로 살펴보겠습니다.

• middleware(클라이언트, 서버) : 클라이언트와 서버 모두 훅들이 본격적으로 호출되기 전에, 앱을 만드는 과정에서 미리 정의해놓은 미들웨어들이 먼저 동작합니다. 만약 serverMiddlware을 정의했다면 서버 사이드에서만 렌더링 과정에서 일반 미들웨어가 동작하기 전에 먼저 동작합니다.
• asyncData(서버 or 클라이언트): 서버 혹은 클라이언트 사이드에서 생명주기 통틀어 한번씩만 호출되는 훅입니다. Vue 인스턴스의 생명주기 이전에 먼저 데이터를 가져와서 렌더링을 하고싶은 경우에 사용합니다. 컴포넌트를 로드하기 전에 항상 호출되며, 페이지 컴포넌트의 경우에만 사용할 수 있습니다. asyncData 의 리턴값은 Vue 인스턴스의 data()와 병합됩니다.
• beforeCreated, created(클라이언트, 서버): 서버에서 새로운 vue인스턴스를 생성한 뒤 이를 프리랜더링 하기 때문 Vue 인스턴스가 서버에서 만들어지는 시점에 created와 beforeCreated훅이 호출됩니다. 또한 클라이언트에서도 인스턴스를 만들고 $mount 메소드가 호출될 때도 따라 호출됩니다. 즉 서버와 클라이언트 사이드 양쪽에서 호출되는 훅입니다.
• beforeMount 이후의 훅(클라이언트): 클라이언트 사이드에서만, 하이드레이션 이후에 $mount 메소드가 호출될 때 나머지 Vue 생명주기 훅들이 실행됩니다.