Nuxt.js란
1. 두두둥 등장
우선 Nuxt.js project의 첫번째 커밋은 무려 2016년도 10월
입니다. (비록 0.x대 버전이긴 함)
1.0.0 alpha 버전은 2017년 5월 22일부터 시작된 것으로 보이고 정식으로 1.0.0이 release된 시점은 2018년 1월 9일
입니다. 생각보다 정식 출시된 시점은 오래되지 않은 것 같으며.. 3년이나 지난 지금에서야 포스팅을 하고 있는 저는 반성합니다.. (중간중간 몇번 써보긴함)
3년동안 2.14.8 버전까지 올라왔으며, major 버전까지 업데이트 된 걸로 보면 생각보다 꽤나 많은 사용자들이 사용하는 듯 합니다.
제 개인적인 추측이지만 Next.js의 1.0.0 release 출시일이 2016년 10월 26일
인걸로 봤을 때, Next.js 출시를 보고 Vue 개발자들이 허둥지둥? 개발을 시작한게 아닐까 추측해봅니다.
2. SSR 과 SEO
Nuxt.js나 Next.js같은 SSR framework과 왜 등장했는가에 대해서 짚고 넢어가기 위해서는 SPA와 SSR에 대한 차이를 명확히 짚고 넢어갈 필요가 있습니다.
SPA
SPA는 single page application의 약자로 web application을 single page로 만든 어플리케이션을 의미합니다. 위키에서는 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다
로 정의하고 있습니다. 장단점에 대해 조금 정리해보겠습니다.
장점
- 페이지의 동적 작성 >> 변하지 않는 부분과 변하는 부분을 구분하여, 변하는 부분만 새롭게 그려주는 방식 >> 쓸데없는 렌더링 비용 감소
- 클라이언트 사이드 렌더링 >> 템플릿 연산을 서버측에서 클라이언트로 옮김
- 컴포넌트 단위로 개발 용이
단점
- 초기 load 속도가 늦음 > js, css파일들을 번들링해서 받기 때문
- SEO가 어려움. > 번들링된 js를 검색봇, 크롤러들이 데이터 수집에 어려움이 있음
위와 같은 장점과 단점이 있는데, 위의 단점들이 생각보다 현업에서는 제법 크리티컬한 이슈라고 생각합니다. 서비스가 커질수록 초기 load에 대한 압박이 심해지고, 마케팅적인 측면에서 검색에 잘 노출이 되지 않는 것은 제법 크리티컬한 이슈입니다. 물론 번들링된 js 스플리팅이나 prerendering 을 통해서 어느 정도 해소할 수는 있지만, 앞서 말씀드린 방법에도 한계가 있기 때문에 서비스 개발에 있어서 충분히 고려되어야할 부분이라고 할 수 있죠.
SSR
SSR은 sever side rendering으로써 client side rendering에 반대가 되는 표현입니다. MPA(multiple page application)들은 SSR 형태를 띄게 되고, SPA라는 개념이 나오기전에는 대부분 MPA 방식을 사용하고 있었다고 볼 수 있습니다. SSR은 템플릿까지 모두 서버에서 처리되는 만큼 SEO에 매우 강력하고, 초기 로드 시간도 SPA보다 훨씬 유리한 측면을 가지고 있습니다. 하지만, 페이지의 동적 작성이 불가능하고, 서버 부하가 생기고, 컴포넌트 단위로 개발이 불가능했었다 라는 점이 단점 이였죠.
장점
- SEO
- SPA에 비해 초기 load속도는 빠름
단점
- SPA에 비해 서버 성능이 더 필요함 > 템플릿 렌더링 비용
- 페이지 이동시 화면 깜빡임 및 중복된 렌더링 비용 발생 > 효율성에 대한 문제
- SPA에 비해 초기 load속도는 빠르지만, 매 페이지마다 템플릿에 대한 새로운 load가 필요함
- 컴포넌트 단위 개발 어려움
SPA와 SSR은 서로 강력한 무기들을 가지고 있다고 생각합니다. 뭐가 더 좋다?는 서비스의 특성과 여건에 따라 다르기 때문에 우위에 대해 논하는것 자체가 넌센스라고 생각합니다.
3. 그래서 Nuxt.js란?
Nuxt.js에 대한 정의를 열심히 찾아봤지만 한 문장으로 전달하기 좋은 오피셜 정의를 발견하지 못하였습니다. 그래서 개인적인 경험으로 정의해보자면 Vue를 기반으로 하여 SSR기반의 web application를 컴포넌트 단위로 개발할 수 있게 해주는 프레임워크
정의할 수 있을 것 같습니다.
Angular, React, Vue SPA 삼대장들이 출시되고 나서, SPA의 단점들을 극복하고자 많은 노력들이 있었지만, 정통 SSR(MPA) 방식의 장점들을 완벽하게 커버하기란 불가능 하였고, SSR(MPA)방식에서 SPA의 장점 중 일부라도 누려보기 위해서 나온 프레임워크가 Next.js(react 기반), Nuxt.js(Vue 기반)들이 아닐까 추측해봅니다.
Nuxt.js는 github repo기준 약 11만명의 개발자들이 사용하고 있고, Nuxt.js 공식 홈페이지에 따르면 github, gitlab들이 Nuxt.js를 사용하여 웹 페이지를 구성하고 있습니다.
'Front_End > Nuxt.js' 카테고리의 다른 글
1. Nuxt.js - 설치하기 (0) | 2021.02.13 |
---|