nuxt 1일차

thgus·2023년 3월 21일
0

vue

목록 보기
2/4

나는 vue 라곤 설치하고 템플릿 사용하고 컴포넌트 만들어 임포트하는게 고작인데, 이마저도 프로젝트에 돌입해서 알게됐다. 그래서 회사에서 nuxt를 사용한다고 하여 복습 차... 작성한다.

내용 출처
내용 출처
정리용으로 적는다.

Nuxt.js 는 Vue.js 응용 프로그램을 만들기 위한 Framework이며, Vue.js Application을 좀 더 손쉽게 만들 수 있으며 Server-Side-Rendering을 지원한다.

Server-Side-Rendering
서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미, 서버에서 페이지 내용을 다 그려서 브라우저로 던져준다.

서버 사이드 렌더링 ~ 클라이언트 사이드 렌더링의 차이점

클라이언트 사이드 렌더링은 빈 HTML 페이지를 받아 내용을 브라우저에서 그린다.

서버에서 미리 그려 브라우저로 보내 페이지 그리는 시간을 단축할 수 있다. ~ 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것.

서버 사이드 렌더링의 목적?

  1. 검색 엔진 최적화
  2. 빠른 페이지 렌더링

특히, 링크를 공유했을 떄 해당 웹사이트 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag 를 페이지 별로 적용하기 위해서 서버 사이드 렌더링이 효율적이다.

서버사이드 렌더링의 단점

Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요하다.
또한, Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야한다. 뷰 싱글 페이지 애플리케이션의 라이프 사이클 훅과는 다른 환경(브라우저가 아닌 Node.js)에서 동작하기 때문에 beforeCreatecreated에서 windowdocument 와 같은 브라우저 객체에 접근할 수 없다.

서버 사이드 렌더링의 경우 컴포넌트가 최초로 생성되는 시점이 브라우저 위가 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없다. 대신 beforeMount나 mounted에서 window와 document를 접근할 수 있다

profile
어쩌다보니IT

0개의 댓글