Django - Vue(Client vs Server Rendering, SPA vs SSR, 4)

Client Rendering과 Server Rendering의 차이점에 대해 알아보자

Client Rendering	Server Rendering
Vue.js 코드로 작성, 즉 클라이언트에서 렌더링 한다.	Django 코드로 작성, 즉 서버에서 렌더링 한다.
Rendering 이란? *DOM(HTML) + CSSOM(CSS Object Model) = Rendering Tree *Layout(요소들의 위치를 잡아주는 Layout) *Painting(요소들을 화면에 보여주는 Painting)   이런 Rendering은 항상 브러우저, 즉 클라이언트에서 처리되는 과정이다.
-> DOM/CSSOM 에 필요한 HTML 및 CSS를 누가 생성하느냐에 따라 Client, Server Rendering으로 나뉘게된다.
Vue.js 코드에서 HTML 및 CSS를 생성하면 Client Rendering * DOM 용: HTML tag 및 Data * CSSDOM 용: CSS를 생성한다.	Django 코드에서 HTML 및 CSS를 생성하면 Server Rendering * DOM 용: HTML tag 및 Data * CSSDOM용: CSS를 생성한다.

성능 차이는 어떻게 될까?

서버 측에서 렌더링을 할 경우, 새로운 웹 페이지를 보고 싶을 때 마다  다음과 같이 새로운 페이지 요청이 필요하다.

Server Side(Django)

그러나 클라이언트 측에서 렌더링 할 경우는 많이 다르다.

Client(Vue.js)

각 접근법에서는 성능면에서 장점과 단점이 있다.

* 클라이언트 측 렌더링을 사용하면 초기 페이지로드가 느려진다. 네트워크를 통한 통신이 느리므로 사용자에게 콘텐츠를 표시하기 전에 서버를 두 번 왕복해야 한다. 그러나 그 후에는 모든 페이지로드가 엄청나게 빠르다.

* 서버 측 렌더링을 사용하면 초기 페이지로드가 크게 느려지지 않는다. 그렇다고 크게 빠르지는 않을 것이다. 그리고 이후 다른 요청도 마찬가지이다.

 

위 정보는 간단하게 읽고 넘어가고, 이제 우리는 Django 와 Vue.js를 같이 사용할 예정이다.

- 첫 화면은 Server Rendering (Django에서 HTML/CSS를 생성)

- 그 이후에 Client Rendering (Vue.js에서 HTML/CSS를 다시 생성)

 

웹 프로그래밍의 동작원리상 첫 화면은 서버로 부터 응답을 받아서 사용하기 때문에

Django로 첫 페이지가 나오게 해야한다

 

그럼 첫 화면은 어떻게 구성 해야할까? 우리는 2가지의 선택지가 있다.

빈화면 과 내용이 있는 화면

 

빈화면(Client Side Rendering)

 

* Vue CLI (webpack)

* Vue directive, axio

* Vue Router, Vuex

Vue.js의 일반적인 개발 방식이다.

 

Vue.js는 SPA즉 Client Side Rendering 방식으로 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML,CSS,Javascript)를 로딩하고, 그 후에는 데이터를 받아올 때만 통신하는 것을 말한다.

SPA(Single Page Application) 첫 화면은 서버로 부터 빈 화면을 받고(요청 시 딱 한 페이지만 불러오고),

그 이후 화면은 Vue.js로 필요한 화면을 뿌려준다.(페이지 이동 시 기존 페이지의 내부를 수정해서 보여준다)

SEO(Search Engine Optimization; 검색엔진최적화) 문제가 발생한다.

페이지가 빈 페이지다보니 검색엔진에 노출되지 않아 페이지가 홍보가 안되는 문제가 발생한다.

 

내용이 있는 화면(Server Side Rendering)

 

Nuxt.js F/W(Framework)

* SSR(Server Side Rendering) 방식

* SEO 문제 해결 가능

* Client + Server Rendering 방식으로, Vue.js 애플리케이션을 개발할 수 있다.

* Client/Server 코드 모두 Vue.js

 

하지만 우리는 Nuxt.js를 사용하지 않을 것이기 때문에

첫 화면은 Django를 Rendering 하고, 이후는 Vue.js를 Rendering 해볼 것이다.

-> Nuxt.js 방식과 유사하다.