Geun Young Kim

Geun Young Kim

Developer

Nuxt js

1 분 소요

Nuxt.js란?

  • Nuxt.js는 Vue.js 애플리케이션 서버 렌더링을 보다 좋게 개발하는 데 필요한 모든 구성을 미리 설정합니다.
  • Vue.js를 보다 빠른 속도로 개발할 수 있도록 도와주는 SSR Framework

SPA/SSR

SPA(Single Page Application)

  • 페에지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트를 뜻합니다.
  • 즉, SPA는 최초 전체 페이지를 로딩한후 데이터만 변경하여 사용합니다.

CSR(Client Side Rendering)

  • 데이터가 없는 빈 깡통인 HTML만 받아오고 데이터는 로드된 이후에 요청해서 받아오는 방식의 랜더링입니다.

SSR(Server Side Rendering)

  • 데이터까지 모두 삽입하여 완성된 HTML을 받아오는 방식의 랜더링입니다.

MPA(Multi Page Application)

  • 서버로부터 완전한 페이지를 받아오고 이후에 데이터를 수정하거나 조회할 때, 다른 완전한 페이지로 이동합니다.

SPA == CSR??

  • SPA는 서버로부터 처음에만 전체 페이지를 받아오고 이후에(SPA) / 동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀌는 부분(CSR)입니다.

SPA에서 SSR을 할 경우 장점

  • SSR은 CSR보다 SEO(Search Engine Optimization)가 뛰어나다. 검색엔진이 퍼블리싱한 웹사이트를 잘 읽도록 검색엔진에 최적화합니다.

Nuxt.js의 등장 배경

  • 서버 사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js Framework의 탄생 이후 Vue.js 애플리케이션의 서버 사이드 렌더링를 위한 Nuxt.js Framework 탄생
  • Nuxt.js의 주요 범위는 UI rendering입니다.

  • Angular, React, Vue -> SPA의 단점들을 극복하고자 SSR 방식의 장점들을 완벽하게 커버하기는 불가능했고 이를 위해 Next.js, Nuxt.js 프레임워크가 등장하였습니다

vue-cli를 통한 Nuxt.js 설치

//yarn
yarn create nuxt-app [프로젝트명]

//npx
npx create nuxt-app [프로젝트명]

//npm
npm init nuxt-app [프로젝트명]

Nuxt.js의 특징

  • Vue 파일 쓰기(.vue)
  • 서버사이드 렌더링
  • 강력한 비동기 데이터 기반 라우팅 시스템
  • 코드 분할 자동화

  • JS & CSS 코드 번들링 및 압축

Nuxt.js LifeCycle

nuxt ServerInit : veux action 메서드로 Nuxt LifeCycle에서 맨 처음으로 호출됩니다.

Route Middleware : 페이지 또는 레이아웃을 렌더링 하기 전에 실행할 수 있는 사용자 정의 기능을 정의할 수 있습니다.

validate() : 동적 라우터 파라미터의 validation 체크를 하는 LifeCycle입니다.

asyncData() ; Vue instance 생성 전 비동기 처리를 해야할 때 불리는 LifeCycle입니다.(return data는 컴포넌트의 데이터와 병합됩니다.)

created() : Vue 객체가 생성된 후 처음으로 불리는 LifeCycle입니다.

fetch() : DOM 생선 전 this에 접근할 수 있고 $fetchState.error를 사용해 컴포넌트 레벨에서 발생하는 에러를 핸들링 할 수 있습니다.(Nuxt 2.12 이후)

mounted() : DOM이 모두 rendering 된 후 불리는 LifeCycle입니다.

참고