나는 vue 라곤 설치하고 템플릿 사용하고 컴포넌트 만들어 임포트하는게 고작인데, 이마저도 프로젝트에 돌입해서 알게됐다. 그래서 회사에서 nuxt를 사용한다고 하여 복습 차... 작성한다.
Nuxt.js 는 Vue.js 응용 프로그램을 만들기 위한 Framework이며, Vue.js Application을 좀 더 손쉽게 만들 수 있으며 Server-Side-Rendering을 지원한다.
Server-Side-Rendering
서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미, 서버에서 페이지 내용을 다 그려서 브라우저로 던져준다.
서버 사이드 렌더링 ~ 클라이언트 사이드 렌더링의 차이점
클라이언트 사이드 렌더링은 빈 HTML 페이지를 받아 내용을 브라우저에서 그린다.
서버에서 미리 그려 브라우저로 보내 페이지 그리는 시간을 단축할 수 있다. ~ 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것.
특히, 링크를 공유했을 떄 해당 웹사이트 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag 를 페이지 별로 적용하기 위해서 서버 사이드 렌더링이 효율적이다.
Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요하다.
또한, Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야한다. 뷰 싱글 페이지 애플리케이션의 라이프 사이클 훅과는 다른 환경(브라우저가 아닌 Node.js)에서 동작하기 때문에 beforeCreate와 created에서 window나 document 와 같은 브라우저 객체에 접근할 수 없다.
서버 사이드 렌더링의 경우 컴포넌트가 최초로 생성되는 시점이 브라우저 위가 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없다. 대신 beforeMount나 mounted에서 window와 document를 접근할 수 있다