개발Story
article thumbnail
Published 2023. 5. 14. 17:00
[NuxtJS] What is Nuxt.js vue.js/Nuxt.js

What is Nuxt.js?

Nuxt.js는 일반적인 Vue.js 어플리케이션을 만드는 프레임워크 입니다.

Nuxt.js 프레임워크는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다.

즉, CSR기반인 vue.js에 SSR을 제공해주고, vue.js의 설정을 자동화시켜주는 프레임워크입니다.

 

장점

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

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

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

 

랜더링 모드

Nuxt에는 3가지 빌드(혹은 렌더링) 옵션들이 존재한다. 

1. SPA (Single Page Application)

우리가 흔히 사용하는 Vue.js, 혹은 React.js 등의 개발방법과 같은 CSR 기반의 어플리캐이션 개발모드이다.

그렇기에, 개발모드를 실행하면 페이지 소스가 적으며, 별도로 server를 포함하지 않는다.

 

2. Universial App (SSR + CSN)

'universial' 모드 혹은 SSR(Server-Side Rendering) + CSN(Client-Side Navigation) 혼용모드로 이해하면 된다.

위에서 언급했듯, 첫 화면만 과거의 서버 렌더링 처럼 완성된 HTML을 뿌려주고(SSR), 이 후엔 AJAX로 동적 라우팅을 수행하여 필요한 데이터 만 가져올 수 있다면 좋겠다(CSN)고 생각하여 등장한 새로운 SSR 방식이다.

 

3. Static App

Nuxt.js는 Universal App, SPA 외에도 정적 페이지(Static App) 개발모드를 지원한다.

모든 페이지가 Pre-rendering(프리랜더링) 된 빌드를 생성하고, SSR을 하지 않기 때문에 자체 server를 포함하지 않는다.

 

특징

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

https://mine-it-record.tistory.com/662

 

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

Nuxt란? Nuxt는 VueJS로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크이다. 좀 더 들어가 보면 React의 Next.js처럼 VueJS의 SSR(서버사이드 렌더링) 애플리케이션을 위한 프레임워크라고 생각하면 된

mine-it-record.tistory.com

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 애플리케

develop365.gitlab.io

https://abangpa1ace.tistory.com/205

 

[Nuxt.js] Nuxt 학습기 - (2) LifeCycle & 렌더링 모드

🤔 서론 앞서 언급한, Nuxt.js의 SSR모드는 Universal SSR 이라고 지칭하며, 이는 고전적인 정적 SSR 방식과는 조금 다르다. 새로운 SSR 모드가 반영되게 된 배경으로는, 아무래도 기존 SSR의 단점인 데이

abangpa1ace.tistory.com

 

profile

개발Story

@슬래기

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!