[NuxtJS] Nuxt.js에 대하여 (ft. Nuxt 3 안정화)

Nuxt란?

Nuxt는 VueJS로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크이다.

좀 더 들어가 보면 React의 Next.js처럼 VueJS의 SSR(서버사이드 렌더링) 애플리케이션을 위한 프레임워크라고 생각하면 된다.

만약 CSR과 SSR의 차이점에 대해 잘 모르겠다면 숙지하고 있는 것을 추천한다.

Nuxt의 장점

Nuxt는 기본적으로 Vue + Library를 포함하고 있으며,

VueJS를 사용할 때 하나하나 설치하고 설정해줘야 했던 부분들이 자동화되어 따로 설치하거나 설정을 할 필요가 없어져 초기 프로젝트 설정 비용 감소와 생상성을 향상시켜주는 장점을 가지고 있다.

그리고 당연하게도 SSR만의 장점들을 가지고 있는데, Nuxt는 흔하게 알고 있는 SSR방식이 아니라 유니버설(Universal) 모드를 지원한다. (유니버설 모드의 특징 역시 하나의 장점이라고 생각된다.)

유니버설(Universal) 모드

Nuxt에서는 지원하는 모드 중에 기본값으로 지정되어있는 유니버설(Universal) 모드에 대해 간략하게 알아보자.

우선 유니버설모드가 등장한 이유는 서버사이드 렌더링(SSR)이 가지고 있는 단점 때문인데,

가장 큰 단점은 아무래도 서버에서 렌더링을 하다 보니 발생하는 "화면의 깜빡임"이라고 할 수 있다.

하지만 이런 단점을 가지고도 SSR만의 장점을 포기할 수 없었는데,

그래서 나온 게 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 선택하여 새롭게 만들어낸 모드가 유니버설 모드이다.

Nuxt 앱을 첫 방문할 때는 서버에서 렌더링을 하고 그 이후에는 SPA마냥 클라이언트에서 렌더링을 하는 것으로 만든 것이다.

이를 위해서 Nuxt는 클라이언트 사이드 하이드레이션(Client Side Hydration)과 코드 분할(Code Splitting) 그리고 프리 패칭(Prefetching)을 활용하였다.

클라이언트 사이드 하이드레이션
- 하이드레이션은 서버로부터 받은 정적 HTML을 사용자와 상호작용할 수 있는 다이나믹 DOM으로 바꾸는 방법을 말한다. 유니버설 모드에서 Nuxt 앱에 사용자가 최초 접근을 하면 서버로부터 정적 HTML을 받는 동시에 HTML을 다이나믹 DOM으로 바꿔줄 자바스크립트 번들을 함께 받아온다.
브라우저는 받아온 자바스크립트 번들을 통해 이미 그려진 정적 HTML을 리렌더링 없이 사용자와 상호작용 할 수 있는 다이나믹 DOM 상태로 바꿔주는 것이다.
코드 분할
- 코드분할은 SPA에서는 주로 사용하는 방식이라 좀 익숙하다.
Nuxt앱에서 다른 페이지로 이동할 때는 유니버설 모드의 특징으로 클라이언트 사이드에서 렌더링을 하기 위해 렌더링용 자바스크립트 번들이 필요한데, 유니버설 모드에서는 당장 방문할 페이지의 렌더링에 필요한 번들만 서버로부터 가져온다. 여기서 다운로드한 번들들은 캐싱이 돼서 재활용이 가능하기 때문에 서버에 재요청할 필요가 없다.
프리 패칭
- Nuxt에서는 렌더링에 필요한 번들만 가져온다고 코드 분할 부분에서 설명을 하였는데, 매끄러운 페이지 이동을 위해 화면에 보이는 <NuxtLink>들에 한해서 해당 페이지들을 렌더링 하는데 필요한 파일들을 미리 서버에 요청한다.
실제로 인터센션 옵저버를 사용하기 때문에 링크가 보이기만 하면 서버에 바로 번들을 요청한다.
이렇듯 사용자가 패칭을 요구하기 전에 미리 패칭 하기 때문에 프리 패칭이라고 한다.
프리 패칭 데모 사이트가 있는데 한번 참고해보면 좋을 듯하다.

Nuxt의 특징

Nuxt는 기본적으로 Vue + Library 구조이기 때문에 아래와 같은 특징들을 가진다.

Vue 파일 쓰기 (*.vue)
코드 분할 자동화
서버 사이드 렌더링
비동기 데이터 기반의 강력한 라우팅 시스템
정적 파일 전송
ES2015+ 지원
JS & CSS 코드 번들링 및 압축
<head> 요소 관리 (<title>, <meta>, 기타.)
개발 중 Hot module 대체
전 처리기 지원: SASS, LESS, Stylus 등
HTTP/2 푸시 헤더 준비
모듈식 아키텍처 확장

Nuxt 버전

Nuxt를 처음 접하게 되면 볼 수 있는 버전들이 Nuxt 2, Nuxt Bridge, Nuxt 3 버전들이 존재한다.

Nuxt공식 문서에는 업그레이드 가이드가 존재하는데, 이러한 버전들을 서로 비교해주고 있다.

허나 여기서 재미난 점이 있는데, 최근에 Nuxt 3 버전의 안정화로 인해 드디어 이 비교해주는 표에서 Nuxt 3가 안정화되었다고 표시되었다는 점이다.

출처: 공식문서 업그레이드 가이드(https://nuxt.com/docs/getting-started/upgrade)

비교해주는 표만 보더라도 Nuxt 3는 그 이전 버전들에 비해 상대적으로 높은 성능을 제공하는 듯하다.

마치 Vue 2와 Vue 3의 차이처럼 말이다.

Vue 3가 처음 등장했을 때도 안정화 이슈 때문에 많이 사용하지 않았었는데,

올해 2월을 기점으로 Vue 3도 안정화 버전을 출시하였고 그로 인해 공식문서 역시 Vue3가 기본으로 설정되어있다.

그리고 올해 11월 16일 드디어 Vue 3 기반의 Nuxt 3 역시 안정화 버전을 출시하게 되었다.

아래 공식문서에 링크되어있던 Nuxt 3 안정 버전 발표 글이다.

https://nuxt.com/v3

Announcing 3.0 · Nuxt

We are thrilled to announce the first stable version of Nuxt 3.0.0 ✨ Nuxt 3 is a modern rewrite of the Nuxt framework based on Vite, Vue3, and Nitro with first-class Typescript support and the result of more than two years of research, community feedback

nuxt.com

지금까지 Vue 3가 안정화됐어도 Nuxt 3를 사용하지 않은 이유가 Vue 3를 기반으로 하는 나머지 라이브러리, 프레임워크들이 아직 안정적으로 따라오지 못해 섣불리 사용하지 못했던 것이었는데,

이제 Nuxt 3를 사용해도 되지 않을까?라는 생각을 하게 된다.

오히려 Nuxt 2 + Composition API를 제공해주던 Nuxt Bridge 가 덜 안정적이다라고 표에 표시하는 것만큼 Nuxt Bridge 보다 Nuxt 3 가 더 안정적이다 라는 것을 공식문서를 통해 볼 수 있다.

기존에 Nuxt Bridge 버전을 사용하면서 Composition API를 어느 정도 도입해봤다면 이제 Nuxt 3로 마이그레이션 하는 것도 나쁘지 않은 선택이라고 생각된다.

사실 이 글을 작성하게 된 계기가 슬슬 공부할 시간이 생겨서 Nuxt를 하게 된 이유도 있지만,

Nuxt 3의 안정화되었다 라는 발표를 보고 나서 작성한 것도 있다.

Nuxt에 대해서라는 거창한 제목을 사용하긴 했지만 너무 한 게시글에 작성하면 상당히 길어지기 때문에 간략한 정보들만으로 채워 넣었고, 좀 더 게시글을 분할해서 알아볼 예정이다.

애초에 이 글로 스타트를 끊은 이유가 Nuxt 3의 안정화 겸 기본 특징들에 대해 알아보기 위함이었다.

참고: https://develop365.gitlab.io/nuxtjs-0.10.7-doc/ko/guide/

소개 - Nuxt.js

2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케