웹프레임워크 | Nuxt.js 프레임워크 개념과 구조

프론트엔드 웹프레임워크의 하나인 넉스트 프레임워크는 무엇인지, 언제 사용하고 어떤 구조로 되어있는지 쉽게 설명드리겠습니다. 

 

 

목차

• Nuxt.js
• CSR vs SSR
• LifeCycle 과 Hook

 

 

Nuxt.js

 

소개

넉스트란 Vue.js 프레임워크 기반의 프레임워크로 Vue.js 프로젝트에서 사용되는 여러 라이브러리를 기본적으로 탑재하고 있습니다. (Vue2, Vue Router, Vuex, Vue Server Renderer, vue-meta, vue-loader, Webpack 등)

 

1) 구조 - Vue + 라이브러리

2) 특징 - Vue 파일 사용, 코드 분할 자동화, 서버 사이드 렌더링

3) 사용 - SEO 개선을 위해 사용

 

디렉토리 구조

demo-nuxt 폴더 안에 하위폴더 들에 대한 설명입니다. Vue.js 의 src 폴더의 하위폴더들이 루트 폴더로 올라온 모습입니다.

 

• asset - css, 이미지, 폰트 등의 리소스 
• components - 애플리케이션에서 사용될 컴포넌트를 포함
• layouts - default.vue가 기본적으로 생성되어 있고 애플리케이션 전체에 대한 레이아웃을 포함합니다. navbar, footer, header 따위의 레이아웃 기능을 제공합니다. Vue 프로젝의 App.vue 와 비슷한 기능입니다.
• middleware - 미들웨어는 페이지 또는 레이아웃이 렌더링되기 전에 실행됩니다. 미들웨어는 pages 또는 layouts 를 렌더링하기 전에 실행할 수 있는 기능으로 미들웨어가 해결되기 전에는 아무것도 표시되지 않습니다.
• node_modules - 넉스트 프레임워크의 핵심 기능을 확장하거나 추가할 수 이씁니다.
• pages - 실제 애플리케이션의 페이지 구성을 포함
• plugins - 애플리케이션에 바인딩될 외부나 내부 플러그인이 위치. Plugins 디렉토리를 사용하면 애플리케이션이 생성되기 전에 Vue 플러그인을 등록할 수 있습니다.
• static - 정적 파일
• store - 애플리케이션에 사용될 vuex store 파일들을 포함
• content - Markdown, JSON, YAML, XML, CSV와 같은 파일들을 가져오고 관리

 

 

CSR vs SSR

 

넉스트의 특징을 파악하려면 알아야 할 두 가지의 개념에 대해 먼저 설명드릴게요.

 

CSR (Client Side Rendering)

클라이언트 사이드 렌더링이랑 최초 한번만 페이지를 전체로딩하고 이 후로는 페이징 리로딩 없이 필요한 부분만 서버로부터 받아와 화면을 갱신하는 렌더링을 말합니다.

 

1) 장점 - 자연스러운 페이지와 필요한 리소스 부분만 로딩하기 때문에 성능에 중요한 영향을 미칩니다.

2) 단점 - 초기 구동 속도가 느리고 검색 엔진 최적화가 어렵습니다.

 

SSR (Server Side Rendering)

서버 사이드 렌더링이란 서버에서 전부 렌더링해서 페이지를 보여주는 방식입니다. 요청(Request)이 있을 때 마다 새로고침이 일어납니다.

 

1) 장점 - SEO(검색 엔진 최적화)

2) 단점 - 페이지 이동 시 깜빡이고 불필요한 부분도 중복해서 렌더링하기 때문에 성능 저하가 있습니다. 

 

깜빡임 현상을 보완하기 위해 새로운 SSR 개념이 등장했고 새 SSR을 적용한 애플리케이션을 「 Universal App 」 이라고 합니다.

 

Server Side Rendering + Client side navigation

웹사이트를 개발할 때 아무리 잘 만든다고 해도 SEO를 최적화하지 않는다면 검색 되기 힘들고 사이트 유입이 더디게 됩니다. 그렇기 때문에 SSR 방식으로 만들고 단점인 깜박임 현상을 보안한 Universal App의 동작 방식이 바로 SSR + CSN 입니다.

 

▶ CSN 과정

1) 프리 페치 (Pre-fetch) - 미리 다음 페이지를 받아와서 깜박임 없이 페이지 이동이 가능합니다.

2) 하이드레이션 (Hydration) - 렌더링 과정을 마치고 HTML 파일 위에 남은 자바스크립트 코드를 실행합니다.

 

 

 

 

LifeCycle 과 Hook

 

Nuxt 3의 주요 생명 주기

1) setup - Vue 3의 Composition API에 setup 함수와 유사하며 컴포넌트가 생성될 때 실행됩니다.

2) fetch - 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)에서 사용되며 데이터를 가져오고 컴포넌트 상태를 설정하는데 사용됩니다.

3) asyncData - 서버 사이드에서 데이터를 가져오는데 사용됩니다. fetch와 유사하지만 asyncData는 반환된 객체를 컴포넌트 데이터로 자동 병합합니다.

 

Nuxt 3의 주요 훅

1) useAsyncData - 비동기 데이터를 관리하는 Composition API 함수로 데이터를 가져오고 컴포넌트 상태를 설정

2) useFetch - useAsyncData와 유사하지만 SSR과 클라이언트 사이드 모두에서 작동합니다.

3) onBeforeMount, onMounted - Vue 3의 생명 주기 훅을 사용할 수 있습니다.

 

Nuxt 3의 특정 훅

1) nuxtServerInit - 서버 사이드에서 한 번만 실행되며, 서버 사이드 렌더링 시 초기 상태를 설정하는데 사용

2) fetch와 asyncData 훅 - 데이터를 가져오고 컴포넌트의 상태를 설정

3) render:route - 라우트가 렌더링되기 전에 실행

4) build:before와 build:done - 빌드 프로세스의 전/후에 실행됩니다.

관련포스트

웹프레임워크 | 부트스트랩 소개와 시작하기

코드이그나이터 | 모델-뷰-컨트롤러 (MVC)

웹프레임워크 | PHP 프레임워크 소개와 폴더 구조

개발환경 | 웹프레임워크의 종류