Vue.js - 서버 사이드 렌더링과 클라이언트 사이드 렌더링

브라우저는 웹 페이지를 화면에 나타내는 역할을 한다.

• 완벽하게 그려진 html 페이지를 나타내는 것

• 일부만 그려져 있어 추가로 더 그려야 할 것이 남아있는 html

이 두가지는 차이가 있다.

클라이언트 사이드 렌더링 💚

• 다 그려져 있지 않은 HTML 페이지를 브라우저에서 받고 프런트엔드 프레임워크와 같은 자바스크립트를 이용하여 나머지 부분을 그리는 것

• 클라이언트가 웹 페이지를 받고 나서도 자바스크립트(또는 프레임워크)로 추가 내용을 화면에 부착하고 그려 줘야하기 떄문에 노출 정도가 상대적으로 낮음!

서버 사이드 렌더링 🧡

• 완벽히 그려진 HTML 페이지를 브라우저에서 받는 것

• 검색 엔진 최적화(SEO, Search Engine Optimization)이다. 화면의 내용이 이미 다 그려진 상태로 클라이언트에 넘어오기 때문에 내용의 노출 정도가 높아 검색 엔진에서 높은 점수를 받을 수 있다.

• 초기 화면 렌더링 속도가 빠르다.

• 뷰에서 서버 사이드 렌더링은 Nuxt.js라는 라이브러리로 지원하는 중

[Reference]

Do it Vue.js 입문(이지스퍼블리싱)