Vue.js는 클라이언트에서 어플리케이션을 만들 수 있는 프레임워크 입니다. 기본
적으로 Vue컴포넌트들은 브라우저에서 DOM을 생성하여 출력합니다. 하지만 같은
컴포넌트들을 서버에서 HTML문자열로 렌더링 할 수 있고 브라우저에 직접 전송할 수
있습니다. 그러면 클라이언트에서는 HTML만 보여주면 됩니다.
SPA(Single-Page Application)와 비교해서 SSR의 장점은 다음과 같습니다.
더나은 검색엔진 최적화(SEO)가 가능합니다.
어플리케이션에서 앱이 데이터를 Ajax를 통해 불러온다면 크롤러는 기다리지 않고
자신의 일을 끝냅니다. 만약 페이지에 페이지를 async하게 불러오는 데이터가 있고
그 페이지가 SEO에서 중요하다면 SSR가 필요합니다.
인터넷 속도가 느리거나 성능이 느린 장치의 경우 콘텐츠 도착 시간이 단축됩니다. 서버에서 렌더링된 마크업은 자바스크립트가 다운될 때 까지 기다릴 필요 없고 실행될 필요도 없습니다. 그래서 유저는 모두 렌더링 된 페이지를 더 빨리 볼 수 있습니다.
하지만 SSR을 사용할 때 trade-off들이 있습니다.
개발하는데 제약이 있습니다. 브라우저 특정 코드는 특정 라이프 사이클 후크 내에서만 사용할 수 있습니다. 특정 라이브러리들은 별도에 처리를 해줘야 할 수도 있습니다.
배포하는데 셋업을 해야합니다. 완전 정적인 SPA는 정적 파일 서버로 배포될 수 있는데 서버사이드 렌더링되는 앱은 Node.js서버가 필요합니다.
더 많은 서버측 로드가 필요합니다. Node.js가 앱을 렌더링 하는 것은 단순한 정적파일을 전송하는 것 보다 더 CPU가 필요한 작업입니다. 따라서 만약 높은 트레픽이 예상된다면 서버로드에 대해 준비해야 하고 캐싱전략을 세워야 합니다.
만약 SEO를 위해서만 SSR을 사용한다면 아마 prerendering을 사용할 수도
있습니다. 웹 서버가 컴파일 하여 HTML을 전송하는것이 아니라 prerendering은
간단하게 특정 라우트에 정적 HTML을 만듭니다. SSR보다 더 간단하고 렌더링을
제외한 나머지 부분은 정적 사이트로 유지할 수 있습니다.
웹팩을 사용한다면 prerender-spa-plugin을 사용할 수 있습니다.
자바스크립트로 직접 만들면서 배우는 - 자료구조와 알고리즘 강의 바로 가기
기계인간 이종립, 소프트웨어 개발의 지혜 - Git 강의 바로 가기
코드숨에서 매주 스터디를 진행하고 있습니다. 메일을 등록하시면 새로운 스터디가 시작될 때 알려드릴게요!
