Django #6 - Client vs Server Rendering

Client vs Server Rendering

VueOnly에서 동작하는 방식은 Client rendering

DjangoOnly 또는 DjangoMixin에서 동작하는 방식을 Server Rendering 이라고 부른다.

Client Rendering	Server Rendering
Vue.js 코드가 클라이언트에서 렌더링을 한다.	Django 코드가 서버에서 렌더링을 한다.

Rendering 이란? - DOM + CSSOM = Rendering Tree - Layout - Painting dㅣ런 Rendering은 항상 브라우저, 즉 클라이언트에서 처리하는 과정이다.
=> DOM/CSSOM 에 필요한 HTML 및 CSS를 누가 생성하느냐?

Vue.js 코드에서 - DOM 용 : html 태그 및 data - CSSOM 용 : css를 생성함	Django 코드에서 - DOM 용: html 태그 및 data - CSSOM 용 : css를 생성함

SPA vs SSR

Client Rendering

• 첫 화면은 Server Rendering (Django에서 HTML/CSS를 생성)
• 그 이후에 Client Rendering (Vue.js에서 HTML/CSS를 다시 생성)

빈 화면의 경우

• Vue CLI (webpack)
• Vue directive, axios
• Vue Router, Vuex
• Vue.js의 일반적인 개발 방식
• SPA(Single Page Application) 방식

단점

! SEO 문제이슈

• Search Engine Optimization
• 검색엔진에 노출되지 않아, 페이지가 홍보가 안되는 문제

내용이 있는 화면 : 이런 SEO 문제를 해결하기 위해 vue.js에서 nuxt.js라는 새로운 프레임워크를 만들었다.

Nuxt.js F/W

• SSR(Server Side Rendering) 방식
• SEO 문제 해결 가능
• Client + Server Rendering 방식으로, Vue.js 애플리케이션을 개발할 수 있음
• Client/Server 코드 모두 Vue.js

우리 예제 (VueOnly 메뉴)

• 첫 화면은 Django Rendering

• 이후는 Vue.js Rendering

• SEO 문제 해결 가능

  -> Nuxt.js 방식과 유사함

---

장고 개발자의 선택은?

1. 클라이언트와 서버 모두 장고 프레임워크를 이용해서 개발하는 방법 (DjangoMixin 메뉴)
2. 서버는 장고를 이용하되, 클라이언트는 Vue.js로 대체하는 방법 (VueOnly메뉴)
3. 장고는 버리고 모두 vue.js로 개발해서 서버, 클라이언트 모두 Nuxt.js 프레임워크를 사용해서 개발하는 방법

3안은 서버 쪽에서는 SSR 처리하기 위한 Nuxt.js 뿐만 아니라, DB처리를 위해 API 서버도 별도로 필요해 이러한 세부적인 사항은 따로 찾아본다.

최근에는 Vue.js, React.js, Angular.js 같은 프론트 프레임워크가 워낙 빨리 발전하고 있어 이 분야를 소홀히 할 수 없다는 점이 현실이다.

필자 같은 경우는

• Client는 Client 전문, Server는 Server 전문 프레임워크
• Vue.js는 React/Angular 등 다른 프레임워크 대비 쉬움
• Vue.js는 기존 코드에 적용이 쉽고, 점진적으로 적용이 가능함

---

React vs Vue

정말 간단히 짚고 넘어가자면, React는 html 태그의 코드들도 Javascript 코드로 이루어져 있다. Vue는 html 템플릿과 Javascript 코드를 병행하며 원하는 방식대로 개발할 수 있다.