[Vue] 서버사이드 렌더링이란?

서버사이드 렌더링이란?

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법

Vue SPA을 서버사이드렌더링의 반대인 클라이언트 사이드 렌더링 방식도 있다.

 

클라이언트 사이드 렌더링

서버에서 넘겨받은 HTML 코드에는 body 태그 본문에 <div id="app"></div> 밖에 없지만 화면에는 Welcome To Your Vue.js App 텍스트와 이미지가 있습니다. 이 텍스트와 이미지는 모두 클라이언트(브라우저)에서 동작한 Vue.js 라이브러리가 그려준 것. 즉 브라우저에서 화면의 결과를 그려낸 것

 

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

어디서 화면에 보일 페이지의 내용을 그리느냐의 차이

클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 그리고 서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 던져줍니다.

 

 

서버 사이드 렌더링 장점

서버 사이드 렌더링을 쓰는 목적은 크게 "검색 엔진 최적화"와 "빠른 페이지 렌더링"

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

 

서버 사이드 렌더링은 빈 HTML 페이지를 받아 브라우저에서 그리는 클라이언트 사이드 렌더링과 다르게 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있습니다. 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것

 

 

서버 사이드 렌더링의 단점

서버 사이드 렌더링은 Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요합니다. 따라서, 프런트엔드 개발 입문자 입장에서는 쉽지 않은 진입 장벽이 존재

 

또한, Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야 합니다. 뷰 싱글 페이지 애플리케이션의 라이프 사이클 훅과는 다른 환경(브라우저가 아닌 Node.js)에서 동작하기 때문에 beforeCreate와 created에서 window나 document와 같은 브라우저 객체에 접근할 수 없습니다.

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

 

 

 

https://nuxtjs.org/docs/concepts/server-side-rendering/

https://vuejs.org/guide/scaling-up/ssr.html

https://joshua1988.github.io/vue-camp/nuxt/ssr.html