• Vue Only : Client redering
  • Django의 html 파일을 그대로 Client가 수용하게 해서 처리되도록 하는 방식
• DjangoOnly, DjangoMixin : Server rendering
  • 웹 프로그래밍, 페이지 이동 발생(djangonly : hard, mixin: soft)

Client Side Rendering

• Client에서 Rendering 한다.
• Rendering
  • 브라우저에서 처리되는 과정
  • DOM + CSSOM = Rendering Tree (요소 확정)
  • Layout 동작 (정확한 위치 잡아주는 동작)
  • Painting (요소를 화면에 보여주는 동작)
• Vue.js 에서 DOM, CSSOM 생성
• 첫 화면만 Backend(Django), 그 이후 코드에 따라 Vue.js가 렌더링
• Vue는 SPA(Single Page Application)방식을 채택하고 있다.
  • SEO(Search Engine OPtimization)문제가 있어 검색 엔진에 노출되지 않아 페이지 홍보는 안된다. -> 처음에 빈화면을 서버로부터 받아서 Vue가 그려주기 때문이다.

Server Side Rendering

• 서버가 Rendering 한다.
• Rendering
  • 브라우저에서 처리되는 과정
  • DOM + CSSOM = Rendering Tree (요소 확정)
  • Layout 동작 (정확한 위치 잡아주는 동작)
  • Painting (요소를 화면에 보여주는 동작)
• Django Code 에서 DOM, CSSOM 생성
• 모든 화면이 Django에서 rendering
  • 첫 화면이 내용있는 화면으로 와서 SEO 문제가 해결된다.
• Nuxt.js 방식
• Client + Sever rendering 방식으로 Vue를 구현 가능
• Client, Server 코드 모두 Vue.js로 가능
• Django를 사용하면 첫 화면은 채워져서 오는 화면으로 SEO 문제가 해결되고, 그 이후는 Vue로 컨트롤 할 수 있어 유용하다.