Nuxt.js

🧐Nuxt.js 뭔데?

Nuxt.js는 Vue.js를 기반으로 하여 SSR 기반의 Web Application을 컴포넌트 단위로 개발 할 수 있게 해주는 프레임워크이다.
웹 애플리케이션을 제작할 때 필요한 vuex, router,axios와 같은 라이브러리들을 미리 구성하여 싱글 페이지 애플리케이션, 서버 사이드 렌더링, 정적 웹 사이트를 쉽게 제작할 수 있다.

Nuxt.js에 대해 알아보기 전에, CSR과 SSR에 대해 알아보는것 먼저해야한다!
이 두가지 개념이 Nuxt.js의 가장 큰 특징이라고 할 수 있다.

✳️ CSR  |  SSR

📌CSR (Client Side Rendering)

SPA(Single Page Application)에서 사용되는 방식이다.
SPA란, 최초 한번 페이지를 전체 로딩한 후 데이터만 변경해서 사용할 수 있는 웹 어플리케이션을 말한다.

최초 페이지를 로딩한 시점부터는 리로딩없이 필요한 부분만 받아서 렌더링 하는 방식이다.

👍 장점
1. 화면 이동이 자연스러움
2. 필요한 부분만 부분적으로 로딩가능 -> 트래픽이 감소함
3. 컴포넌트 별 개발이 용이함

👎 단점
1. SEO(검색 엔진 최적화)어려움
2. 보안 이슈
3. 자바스크립트 파일을 번들링해서 받기 때문에 속도가 느림.

📌SSR(Server Side Rendering)

MPA(Multiple Page Application)에서 사용되는 방식이다.
서버에서 사용자에게 보여줄 페이지를 모두 렌더링 하여 띄우는 방식.
request를 할 때마다 새로고침이 일어난다.
SSR은 SEO에 매우 강력하고, 초기 로드 시간도 SPA보다 훨씬 유리한 측면을 가지고 있다.

👍 장점
1. SEO(검색엔진 최적화)
2. CSR에 비해 초기 로드 속도가 빠름

👎 단점
1. 페이지 이동 시 화면이 깜빡임 및 중복된 렌더링 비용 발생
2. 서버 렌더링에 따른 부하 발생
3. 컴포넌트 단위의 개발이 어려움
4. SPA에 비해 초기 로드 속도는 빠르지만, 매 페이지 마다 템플릿에 대한 새로운 로드가 필요하다.

📌SSR을 왜 쓸까?

서버 사이드 랜더링을 쓰는 목적은 크게 검색 엔진 최적화와 빠른 페이지 렌더링이다.
SEO란 검색 사이트에서 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 최적화 하는 기법이다.
특히, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph)Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌더링이 효율적이다.
또한, SSR은 빈 HTML 페이지를 받아 브라우저에서 그리는 클라이언트 사이드 렌더링과 다르게 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있다.
사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것이다 !

🧐Nuxt.js의 장점

• 검색 엔진 최적화
• 초기 프로젝트 설정 비용 감소와 생산성 향상
  • ESLint, Prettier
  • 라우터, 스토어 등의 라이브러리 설치 및 설정 파일 필요 X
  • 파일 기반의 라우팅 방식, 설정 파일 자동 생성
• 페이지 로딩 속도와 사용자 경험 향상
  • 브라우저가 하는 일에 서버를 나눠준다.
  • 모르면 지나칠 수 있는 코드 스플리팅이 기본으로 설정

🧐Nuxt.js의 특징

• 서버 사이드 렌더링
• 코드 분할 자동화
• 비동기 데이터 기반의 강력한 라우팅 시스템
• 정적 파일 전송
• 코드 스플리팅
• ES6/ES6+ 변환
• 웹팩을 비롯한 기타 설정

🧐Nuxt.js 언제 사용하지 ?

딱 ! 결정적으로, SEO 개선을 할 때 사용한다.

🧐Nuxt.js Life Cycle

2023.01.12 어렵다 어렵다 어렵다 !!!!