Nuxt.js는 Vue.js 기반의 프레임워크로서, 웹 애플리케이션을 개발하기 위한 도구다.
Nuxt.js는 서버 사이드 렌더링(SSR) 및 유니버설 앱(Universal App)을 지원하며, Vue.js의 기능을 보완하여 더 나은 SEO 및 사용자 경험을 제공하도록 설계되었다.
Universal Mode
유니버설모드가 등장한 이유는 서버사이드 렌더링(SSR)이 가지고 있는 단점 때문인데,
가장 큰 단점은 아무래도 서버에서 렌더링을 하다 보니 발생하는 "화면의 깜빡임"이라고 할 수 있다.
하지만 이런 단점을 가지고도 SSR만의 장점을 포기할 수 없었는데,
그래서 나온 게 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 선택하여 새롭게 만들어낸 모드가 유니버설 모드이다.
Nuxt 앱을 첫 방문할 때는 서버에서 렌더링을 하고 그 이후에는 SPA마냥 클라이언트에서 렌더링을 하는 것으로 만든 것이다.
Angular, React, Vue SPA 삼대장들이 출시되고 나서 SPA의 단점을 극복하고자 많은 노력들이 있었지만, 정통 SSR(MPA) 방식의 장점을 완벽하게 커버하기란 불가능 하였다. 그래서 SSR(MPA) 방식에서 SPA의 장점 중 일부라도 누려보기 위해서 나온 프레임워크가 Next.js(React 기반), Nuxt.js(Vue 기반)들이 아닐까 추측된다
✔ Nuxt 기능
- Vue 2(Vue 3)
- Vue Router
- Vuex (store 옵션을 사용하는 경우에만 포함)
- Vue Server Renderer (mode : ‘spa’를 사용하는 경우에는 제외)
- vue-meta
vue-loader와 babel-loader와 함께 Werpark을 사용해서 코드를 묶고, 분할하며, 압축한다.
✔ 특징
- Vue 파일 쓰기 (*.vue)
- 코드 분할 자동화
- SSR (서버 사이트 렌더링)
- 비동기 데이터 기반의 강력한 라우팅 시스템
- 정적 파일 전송
- ES6/ES7 지원
- JS & CSS 코드 번들링 및 압축
- <head> 요소 관리 (<title>, <meta>, 기타)
- 개발 중 Hot module 대체
- 전 처리기 지원 : SASS, LESS, Stylus 등
- HTTP/2 푸시 헤더 준비
- 모듈식 아키텍처 확장
✔ 동작구조
'web > Vue' 카테고리의 다른 글
| JWT에 대한 고찰 (0) | 2023.09.13 |
|---|---|
| Nuxt(Vue) 로 admin page 만들기 (2) (0) | 2023.09.05 |
| Nuxt(Vue) 로 admin page 만들기 (1) (0) | 2023.09.04 |
| Nuxt 구조 (0) | 2023.09.01 |
| Nuxt 로 Vue 환경세팅 (0) | 2023.08.31 |
