Ch 01. 왜 Nuxt.js인가

Vue.js는 훌륭한 프레임워크입니다. 컴포넌트 기반 개발, 반응형 데이터 바인딩, Composition API까지 갖추고 나면 웬만한 웹 앱은 뚝딱 만들 수 있습니다. 그렇다면 Nuxt.js는 왜 필요할까요?

Vue만으로 쇼핑몰을 만든다고 생각해봅시다. 상품 목록 페이지를 열면 브라우저가 빈 HTML을 받아서 JavaScript를 실행한 뒤 데이터를 가져와 화면을 그립니다. 사용자 눈에는 잠깐 흰 화면이 보입니다. 그리고 검색 엔진 봇은 JavaScript를 실행하기 전 HTML을 읽어가기 때문에 "상품이 없는 페이지"로 색인합니다. SEO에 치명적입니다.

뉴스 사이트나 블로그도 마찬가지입니다. 기사 내용이 검색 결과에 제대로 노출되려면 서버에서 HTML을 완성해서 내려줘야 합니다. SNS의 링크 미리보기(OG 태그)도 서버 사이드 렌더링(SSR)이 있어야 제대로 작동합니다.

첫 번째는 SEO입니다. 검색 엔진 최적화가 중요한 서비스라면 Vue 단독으로는 한계가 있습니다. 두 번째는 초기 로딩 속도입니다. 사용자가 처음 페이지를 열 때 빈 화면을 보는 시간을 줄이려면 서버에서 HTML을 미리 생성해서 전달해야 합니다. 세 번째는 풀스택 개발입니다. Vue는 프론트엔드 전용이라 API 서버를 별도로 운영해야 합니다. 프로젝트가 작을 때는 이 분리가 오히려 번거롭습니다.

Nuxt가 Vue에 더하는 것들

Nuxt.js는 Vue 위에서 동작합니다. Vue를 교체하는 것이 아니라, Vue를 더 강력하게 만드는 레이어입니다.

pages/ 폴더에 파일을 만들면 자동으로 라우팅이 설정됩니다. vue-router 설정 파일을 손으로 작성할 필요가 없습니다. SSR은 기본으로 활성화되어 있어서 서버에서 HTML을 완성한 뒤 브라우저에 전달합니다. server/api/ 폴더에 파일을 추가하면 API 엔드포인트가 됩니다. Nitro라는 서버 엔진이 프론트엔드와 백엔드를 하나의 프로젝트에서 처리합니다.

자동 임포트도 눈에 띕니다. ref, computed, useFetch 같은 함수를 일일이 import하지 않아도 됩니다. Nuxt가 필요한 곳에서 알아서 처리합니다.

Vue를 아는 당신에게 Nuxt는 날개가 됩니다

Vue.js 경험이 있다면 Nuxt 학습 곡선은 생각보다 완만합니다. Composition API 문법은 그대로 쓰고, 컴포넌트 작성 방식도 동일합니다. 달라지는 것은 파일 구조와 SSR을 고려하는 사고방식입니다.

Vue로 만들 수 있던 것을 Nuxt로 만들면 SEO가 개선되고, 초기 로딩이 빨라지고, 별도 백엔드 없이 API까지 처리할 수 있게 됩니다. 같은 노력으로 더 많은 것을 얻는 셈입니다.

이 책은 그 날개를 다는 방법을 안내합니다.