티스토리 뷰
728x90
Nuxt.js 등장
- Nuxt.js Projext의 첫 번째 커밋은 2016년도 10월이다. (0.x대 버전)
- 1.0.0 alpha 버전은 2017년 5월 22이부터 시작된 것으로 보이고 정식으로 1.0.0이 release된 시점은 2018년 1월 9일이다.
- Nuxt.js를 만든 팀이 Next.js를 만든 팀이다.
기초지식
Nuxt.js 란?
- React 애플리케이션을 위한 Next.js 프레임워크가 있다면, Vue를 위해 SSR을 지원하는 프레임워크가 Nuxt.js이다.
- Nuxt.js는 Vue를 기반으로 하여 SSR 기반의 Web Application을 컴포넌트 단위로 개발 할 수 있게 해주는 프레임워크이다.
- Angular, React, Vue SPA 삼대장들이 출시되고 나서 SPA의 단점을 극복하고자 많은 노력들이 있었지만, 정통 SSR(MPA) 방식의 장점을 완벽하게 커버하기란 불가능 하였다. SPA 상에서 SSR을 구축 할 수 있는 React.js 기반의 Next.js, Vue.js 기반의 Nuxt.js가 나오게 되었다.
Nuxt.js에 포함된 기능
- Vue 2
- Vue Router
- Vuex (store 옵션 사용시 포함)
- vue-meta
- Vue Server Renderer (mode : ‘spa’를 사용하는 경우에는 제외)
vue-loader와 babel-loader와 함께 Werpark을 사용해서 코드를 묶고, 분할하며, 압축한다.
Nuxt.js 특징
- Vue 파일 쓰기 (*.vue)
- 코드 분할 자동화
- SSR (서버 사이트 렌더링)
- 비동기 데이터 기반의 강력한 라우팅 시스템
- 정적 파일 전송
- ES6/ES7 지원
- JS & CSS 코드 번들링 및 압축
- <head> 요소 관리 (<title>, <meta>, 기타)
- 개발 중 Hot module 대체
- 전 처리기 지원 : SASS, LESS, Stylus 등
- HTTP/2 푸시 헤더 준비
- 모듈식 아키텍처 확장
Nuxt.js 동작 구조
아래의 구조는 <nuxt-link>를 서버가 호출하거나 이를 통해 사용자가 이동한 경우, nuxt.js가 동작하는 구조이다.
'ETC' 카테고리의 다른 글
SSR(Server-Side-Rendering) / CSR (Client-Side-Rendering) (0) | 2022.11.20 |
---|---|
Intellj db연동 (0) | 2022.04.21 |
[생각해보기] (0) | 2022.03.22 |
댓글