Nuxt란?

 

Nuxt

Nuxt는 직관적인 Vue 프레임워크.  라고 설명하고 있다.

https://nuxtjs.org/

The Intuitive Vue Framework

 

Nuxt 등장 배경

React의 Next.js와 같이 SSR 프레임워크 중 하나로서 Vue 버전의 SSR 프레임워크이다.

 

CSR(Client Side Rendering)

SPA는 일반적으로 자바스크립트 기반 비동기 모델의 CSR 방식으로 동작한다.

검색엔진 크롤링 봇들은 CSR 동작 웹사이트를 크롤링할때 js를 통해 동적으로 변경된 html을 읽는 것이 아니라

빈 html을 읽기때문에 SEO 성능에 관한 문제점이 있었다.

SSR(Server Side Rendering)

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. JSP/Servlet의 아키텍처에서 이 방식을 사용했다.

SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다.

 

Nuxt 장점

• 검색 엔진 최적화
• 초기 프로젝트 설정 비용 감소와 생산성 향상
  • ESLint, Prettier
  • 라우터, 스토어 등의 라이브러리 설치 및 설정 파일 필요 X
  • 파일 기반의 라우팅 방식. 설정 파일 자동 생성
• 페이지 로딩 속도와 사용자 경험 향상
  • 브라우저가 하는 일을 서버에 나눠준다
  • 모르면 지나칠 수 있는 코드 스플리팅이 기본으로 설정

 

Nuxt 특징

• 서버 사이드 렌더링
• 규격화된 폴더 구조(layout, store, middleware, plugins 등)
• pages 폴더 기반의 자동 라우팅 설정
• 코드 스플리팅
• 비동기 데이터 요청 속성
• ES6/ES6+ 변환
• 웹팩을 비롯한 기타 설정

 

Nuxt 설치

npx

npx create-nuxt-app <project-name>

npm

npm init nuxt-app <project-name>

yarn

yarn create nuxt-app <project-name>

 

vue-cli를 통한 설치

npm i -g @vue/cli
npm i -g @vue/cli-init

vue init nuxt-community/starter-template <project-name>
cd <project-name>
npm i

 

install Nuxt.js

 

프로젝트 최초 구조

 

더 자세한 폴더 구조나 폴더에 대한 설명은 공식 홈페이를 참고하길 바란다.

참고:

https://nuxtjs.org/

https://d2.naver.com/helloworld/7804182

https://joshua1988.github.io/vue-camp/nuxt/intro.html#nuxt%E1%84%8B%E1%85%B4-%E1%84%8C%E1%85%A1%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%B7