Nuxt.js의 등장 배경

Nuxt.js란??

• Nuxt란 Vue.js의 Framework
• Vue.js는 JS의 Framework인데, 이것에 또 Framework를 사용한다는 개념
  • Framework와 Library의 간단한 차이점은 자유도인데, Framework는 자유도가 낮은 편...
• Nuxt는 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크
  • 웹 애플리케이션을 제작할 때 필요한 Vuex, Router, Axios와 같은 라이브러리들을 미리 구성하여 SPA, SSR, Static Generated Website를 쉽게 제작할 수 있게 도와주는 도구

Nuxt.js의 등장 배경

• Nuxt.js나 Next.js(React기반) 같은 SRR Framework가 왜 등장했는가에 대해 짚고 넘어가기 위해서는 SPA와 CSR, SSR에 대한 차이를 명확히 짚고 넘어갈 필요가 있음
  • SPA
    • 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션
    • 장점
      • 페이지의 동적 작성 > 변하지 않는 부분과 변하는 부분을 구분하여, 변하는 부분만 새롭게 그려주는 방식 > 쓸데 없는 렌더링 비용 감소
      • 클라이언트 사이드 렌더링 > 템플릿 연산을 서버 측에서 클라이언트로 옮김
      • 컴포넌트 단위로 개발 용이
    • 단점
      • 초기 load 속도가 늦음 > js, css 파일들을 번들링해서 받기 때문
      • SEO가 어려움 > 번들링 된 js를 검색 봇, 크롤러들이 데이터 수집에 어려움이 있음(요즘엔 구글 봇이 SPA도 인식을 한다고 함)
  • SSR
    • CSR과 반대되는 표현, 템플릿까지 모두 서버에서 처리되는 방식
    • 장점
      • SEO
      • CSR에 비해 초기 로드 속도가 빠름
    • 단점
      • SPA에 비해 서버 성능이 더 필요 > 템플릿 렌더링 비용
      • 페이지 이동시 화면 깜빡임 및 중복된 렌더링 비용 발생 > 효율성에 대한 문제 > UX문제로 이어질 수 있음
      • SPA에 비해 초기 load속도는 빠르지만, 매 페이지마다 템플릿에 대한 새로운 load가 필요
      • 컴포넌트 단위 개발 어려움
• vue에서 서버 사이드 렌더링을 사용할 수 있다면 뷰 앱을 순수한 HTML 페이지로 미리 렌더링해둔 다음, 브라우저가 이를 다운로드하여 즉각 화면에 표시하고, 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용할 수 있게 됨

Nuxt.js의 특징

• 서버 사이드 렌더링 방식
• 규격화된 Package(폴더)구조 (layout, store, middleware, plugins..)
• pages 폴더 기반 자동 라우팅 설정
• 코드 스플리팅
• 비동기 데이터 요청 속성
• ES6/ES6+ 변환
• 웹팩을 비롯한 기타 설정