Vue Server Side Rendering Guide

What is Server-Side Rendering (SSR)?

Vue.js는 클라이언트에서 어플리케이션을 만들 수 있는 프레임워크 입니다. 기본 적으로 Vue컴포넌트들은 브라우저에서 DOM을 생성하여 출력합니다. 하지만 같은 컴포넌트들을 서버에서 HTML문자열로 렌더링 할 수 있고 브라우저에 직접 전송할 수 있습니다. 그러면 클라이언트에서는 HTML만 보여주면 됩니다.

Why SSR?

SPA(Single-Page Application)와 비교해서 SSR의 장점은 다음과 같습니다.

• 더나은 검색엔진 최적화(SEO)가 가능합니다. 어플리케이션에서 앱이 데이터를 Ajax를 통해 불러온다면 크롤러는 기다리지 않고 자신의 일을 끝냅니다. 만약 페이지에 페이지를 async하게 불러오는 데이터가 있고 그 페이지가 SEO에서 중요하다면 SSR가 필요합니다.

• 인터넷 속도가 느리거나 성능이 느린 장치의 경우 콘텐츠 도착 시간이 단축됩니다. 서버에서 렌더링된 마크업은 자바스크립트가 다운될 때 까지 기다릴 필요 없고 실행될 필요도 없습니다. 그래서 유저는 모두 렌더링 된 페이지를 더 빨리 볼 수 있습니다.

하지만 SSR을 사용할 때 trade-off들이 있습니다.

• 개발하는데 제약이 있습니다. 브라우저 특정 코드는 특정 라이프 사이클 후크 내에서만 사용할 수 있습니다. 특정 라이브러리들은 별도에 처리를 해줘야 할 수도 있습니다.

• 배포하는데 셋업을 해야합니다. 완전 정적인 SPA는 정적 파일 서버로 배포될 수 있는데 서버사이드 렌더링되는 앱은 Node.js서버가 필요합니다.

• 더 많은 서버측 로드가 필요합니다. Node.js가 앱을 렌더링 하는 것은 단순한 정적파일을 전송하는 것 보다 더 CPU가 필요한 작업입니다. 따라서 만약 높은 트레픽이 예상된다면 서버로드에 대해 준비해야 하고 캐싱전략을 세워야 합니다.

SSR vs Prerendering

만약 SEO를 위해서만 SSR을 사용한다면 아마 prerendering을 사용할 수도 있습니다. 웹 서버가 컴파일 하여 HTML을 전송하는것이 아니라 prerendering은 간단하게 특정 라우트에 정적 HTML을 만듭니다. SSR보다 더 간단하고 렌더링을 제외한 나머지 부분은 정적 사이트로 유지할 수 있습니다.

웹팩을 사용한다면 prerender-spa-plugin을 사용할 수 있습니다.

Sources

• https://ssr.vuejs.org/#ssr-vs-prerendering