초코레

서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 본문

Frontend/Vue.js

서버 사이드 렌더링 vs 클라이언트 사이드 렌더링

초코레 2020. 1. 14. 18:34
  • 브라우저는 웹 페이지를 화면에 나타내는 역할을 하는 데, 완벽하게 그려진 HTML 페이지를 나타내는 것과 일부만 그려져 있어 추가로 더 그려야 할 것이 남아 있는 HTML 페이지를 나타내는 것은 차이가 있다.
  • 클라이언트 사이드 렌더링
    • 다 그려져 있지 않은 HTML 페이지를 브라우저에서 받고 프런트엔드 프레임워크와 같은 자바스크립트를 이용하여 나머지 부분을 그리는 것을 의미한다.
    • 클라이언트가 웹 페이지를 받고 나서도 자바스크립트(또는 프레임워크)로 추가 내용을 화면에 부착하고 그려 줘야하기 떄문에 노출 정도가 상대적으로 낮다.
  • 서버 사이드 렌더링
    • 완벽히 그려진 HTML 페이지를 브라우저에서 받는 것을 의미한다.
    • 검색 엔진 최적화(SEO, Search Engine Optimization)이다. 화면의 내용이 이미 다 그려진 상태로 클라이언트에 넘어오기 때문에 내용의 노출 정도가 높아 검색 엔진에서 높은 점수를 받을 수 있다.
    • 초기 화면 렌더링 속도가 빠르다.
    • 뷰에서 서버 사이드 렌더링은 Nuxt.js라는 라이브러리로 지원하고 있다.
    • 뷰 공식 사이트 서버 사이드 렌더링
  • 리액트, 앵귤러, 뷰 프레임워크의 기본 사용 방법은 클라이언트 사이드 렌더링이다.
 

nuxtjs.org

Nuxt.js official website

ko.nuxtjs.org

 

Vue.js Server-Side Rendering Guide | Vue SSR Guide

Vue.js Server-Side Rendering Guide NOTE This guide requires the following minimum versions of Vue and supporting libraries: vue & vue-server-renderer 2.3.0+ vue-router 2.5.0+ vue-loader 12.0.0+ & vue-style-loader 3.0.0+ If you have previously used Vue 2.2

ssr.vuejs.org

저작자표시

'Frontend > Vue.js' 카테고리의 다른 글

NPM (Node Package Manager)  (0) 2020.01.15
웹팩 (webpack)  (0) 2020.01.14
뷰의 반응성 (Vue Reactivitiy)  (0) 2020.01.14
뷰엑스(Vuex)  (0) 2020.01.14
할 일 관리 앱 만들기  (0) 2020.01.13
'Frontend/Vue.js' Related Articles more