[Nuxt.js] 알아보자
더컴퍼스가 사용하고 있는 프레임워크
더컴퍼스는 Nuxt.js라는 프레임워크를 사용하고 있습니다.
Nuxt.js를 처음 접하는 개발자들을 위해 이에대해 설명하고, 셋업하는 과정에 있어 도움이 되고자 이 글을 작성하게되었습니다.
Nuxt.js란?
Vue.js 프레임워크 기반의 개발 환경 구축에 도움을 주는 프레임워크로, SSR Vue.js 어플리케이션을 위해 개발되어, 비동기데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다.
우선 Nuxt의 렌더링 방식을 이해하기 위해 SPA와 CSR, SSR을 알아보겠습니다.
SPA
Single Page Application
말 그대로 Web Application을 Single Page로 만들어, 최초 한 번만 페이지 전체를 로딩하고 이후로는 동적으로 페이지를 구성하는 것을 말합니다.
즉, 변하지 않는 부분과 변하는 부분을 구분하여, 변하는 부분만 새롭게 그려주는 방식으로 쓸데없는 랜더링 비용, 트래픽을 감소시켜 사용자에게 최적화된 환경을 제공합니다.
CSR
Client Side Rendering
웹 브라우저에 주소 입력 시, 서버에서 View를 랜더하지 않고 데이터가 없는 빈 HTML만을 우선 받아온 후, JS파일이나 각종 리소스를 다운받아 클라이언트 측에서 브라우저에 랜더링 하는 것입니다.
이러한 방식 때문에 SSR보다는 초기 View를 볼 수 있기 까지 시간이 걸리고, 페이지를 빈 페이지로 인식하게 되어 SEO가 어렵습니다.
그러나 최초 페이지를 로딩한 시전부터는 필요한 부분만 서버로부터 받아 화면을 갱신하기에 화면 깜빡임 없이 페이지 이동이 자연스럽습니다.
그렇다면 SPA와 CSR이 같은 의미일까요?
같지 않습니다.
SPA는 페이지를 하나만 쓰는 어플리케이션, CSR은 클라이언트에서 렌더링 하는 방식으로 SPA가 한페이지에 동적으로 데이터를 수정하는 방식을 위해 CSR을 채택한 것 뿐입니다.
SSR
Server Side Rendering
서버에서 새로운 페이지에 대한 요청을 구하면, 서버에서 사용자에게 보여줄 페이지를 모두 렌더링 하여 띄우는 방식입니다.
이는 View를 서버에서 렌더링하여 가져오는 것으로 첫 로딩이 매우 짧고 HTML에 모든 컨텐츠가 저장되어 있어 SEO에 유리합니다.
하지만, 페이지 이동 시에 화면이 깜빡이고 서버 부하가 생기며 컴포넌트 단위로 개발이 불가능하다는 단점을 가지고 있습니다.
Nuxt는 컴포넌트 단위의 개발과 SPA의 단점 극복을 위해,
Vue에 SSR을 지원하는 프레임워크입니다.
Nuxt는 CSR과 더불어 다양한 렌더링 모드를 가지고 있는데, 이 중 Universal Rendering을 통해 SSR을 지원함으로써, 더 나은 사용자 경험 및 성능을 제공하고 검색 엔진 인덱싱을 최적화합니다.
Universal Rendering
브라우저가 페이지를 요청하면, 서버에서 완전히 렌더링 된 HTML 페이지를 브라우저에 반환합니다. 렌더링 과정을 마친 이후에는, 브라우저로 전달된 HTML 파일 위에 남은 JavaScript 코드를 백그라운드에서 실행하는 Hydration을 통해 인터랙티브한 동작과 CSR의 장점을 보강합니다.
©2023 thecompass. All rights reserved
