Nuxt.js는 Vue.js 기반으로 만들어진 SSR(Server Side Rendering) 오픈소스 프로젝트이다. SSR을 통해 보다 나은 UI 렌더링을 제공하고, 정적 페이지를 만들어내는 기능을 포함한다.
SPA(Single Page Application)는 서버 없이, 컨텐츠가 비어 있는 HTML에 번들링 된 JS모듈 어플리케이션이다. 하지만 SEO(Search Engine Optimization)에 있어서 웹크롤러, 검색봇 등이 해당 페이지 컨텐츠가 비어 있기 때문에 필요한 정보를 수집하지 못하기에 검색엔진 최적화에 문제가 있다.
Nuxt.js는 위와 같은 문제를 해결하기 위해 Node.js 서버로 JS를 실행하여 컨텐츠가 렌더링 된 상태로 응답 할수 있도록 한다.
Nuxt.js는 Vue / Vue Router / Vuex .. 등 개발에 필요한 기능들을 제공하고 있고 초기 세팅시 디렉토리 구조도 기본적으로 잘 구성되어 있다.
vue-loader와 babel-loader와 함께 Webpack을 사용해서 코드를 묶고, 분할하며, 압축합니다. 용량은 57kB min+gzip 밖에 되지 않는다.
특징
- Vue 파일 쓰기 (*.vue)
- 코드 분할 자동화
- 서버 사이드 렌더링
- 비동기 데이터 기반 라우팅
- 정적 파일 전송
- ES6 / ES7 지원
- JS & CSS 코드 번들링 및 압축
- <head>요소 관리 (<head>, <meta>, 기타..)
- 개발 중 Hot module 대체
- SASS, LESS, Stylus 등 지원
- HTTP/2 푸시 헤더 준비
- 모듈식 아키텍처 확장
정적 파일 생성
정적 파일 생성을 위해 Nuxt.js는 애플리케이션을 빌드 할 때 “nuxt generate” 명령어를 통해서 모든 라우트를 HTML로 생성한다.
pages/
about.vue
index.vue아래와 같이 생성 된다.
dist/
about/
index.html
index.html디렉토리 구조
** (이름 변경할 수 없음)
- Assets: LESS, SASS, JS 같은 컴파일 되지 않은 것을 포함
- Components: Vue.js 컴포넌트를 포함
- Layouts**: 애플리케이션의 레이아웃을 포함
- Middleware: 애플리케이션의 미들웨어를 포함. 렌더링되기 전 사용자 정의 함수 정의
- Pages: 뷰와 라우트를 포함. Nuxt.js는 모든 .vue 파일을 읽고 라우터를 생성
- Plugins: vue.js 애플리케이션이 생성되기 전에 실행하고 싶은 JS 플러그인을 포함
- Static**: 정적 파일들을 포함. 이 디렉토리의 파일들은 /에 연결됩니다. ex) /static/robots.txt 은 /robots.txt 로 연결됩니다.
- Store**: Vuex Store 파일을 포함. Vuex Store 옵션은 Nuxt.js에 의해 실행되고, index.js 파일이 만들어지면 자동으로 옵션이 활성화 된다.
- nuxt.config.js: 사용자 정의 설정을 포함
- package.json: 의존성과 스크립트를 포함
