[Vue] SPA(Single Page Application), CSR(Client Side Rendering)

Vue.js

• 프론트엔드 프레임워크
• 사용자 인터페이스를 만들기 위한 진보적인 자바스크립트 프레임워크
• SPA (Single Page Application) 지원
• 왜 Vue.js일까?
  • Vanilla JS는 페이지에서 수정되는 사항이 있으면, 수정되는 '모든 요소'를 선택해서 '이벤트'를 등록하고 변경
  • Vue.js는 DOM과 Data가 연결되어 있으면 Data를 수정할 경우 DOM이 알아서 변경

 

SPA (Single Page Application)

• 단일 페이지 애플리케이션
• 현재 페이지를 동적으로 렌더링함으로써 사용자와 소통하는 웹 애플리케이션
• 단일 페이지로 구성되며 최초에만 페이지를 다운로드하고 이후에는 동적으로 DOM 구성
  • 전체 페이지가 아닌 현재 페이지 중 필요한 부분만 동적으로 다시 작성
• 연속되는 페이지 간 사용자 경험 (UX) 향상
• 동작 원리 일부가 CSR (Client Side Rendering) 구조를 따름
• 과거 : MPA (Multi Page Application) → 요청에 따라 매번 새로운 페이지 응답

 

SSR (Server Side Rendering)

• 서버에서 클라이언트에게 보여줄 페이지를 모두 구성하여 전달하는 방식
• JS 웹 프레임워크 이전에 사용되던 전통적인 렌더링 방식
• 장점
  • 초기 구동 속도가 빠름 (클라이언트가 빠르게 컨텐츠를 볼 수 있음)
  • SEO (검색 엔진 최적화)에 적합 (DOM에 이미 모든 데이터 작성되어있기 때문)
• 단점
  • 모든 요청마다 새로운 페이지 구성하여 전달
  • 반복되는 전체 새로고침으로 사용자 경험 떨어짐
  • 상대적으로 트래픽이 많아 서버의 부담이 클 수 있음

 

CSR (Client Side Rendering)

• 서버에서 화면을 구성하는 SSR 방식과 달리 클라이언트에서 화면 구성
• 최초 요청 시 HTML, CSS, JS 등 데이터를 제외한 각종 리소스를 응답받고,
  이후 클라이언트에서는 필요한 데이터만 요청해 JS로 DOM을 렌더링하는 방식
• 장점
  • 서버와 클라이언트 간 트래픽 감소
  • 사용자 경험 향상
• 단점
  • SSR에 비해 전체 페이지 렌더링 시점이 느림
  • SEO (검색 엔진 최적화)에 어려움이 있음 (최초 문서에 데이터가 없기 때문)
    → SSR을 지원하는 SEO 대응 기술이 이미 존재, 선별적 SEO 대응 가능
        혹은 별도의 프레임워크 사용하기도 함 (Nuxt.js : Vue.js에서 사용 / Next.js : React에서 사용) 

 

* SSR과 CSR의 차이

: 서버가 렌더링 : SSR / 클라이언트가 렌더링 : CSR  (*렌더링 : 화면을 그리는 것)

  (ex: 서버 - 장고, 클라이언트 - 크롬)

 

 

* SEO (Search Engine Optimization; 검색 엔진 최적화)

: 웹 페이지 검색엔진이 자료를 수집하고 순위 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 노출될 수 있도록 하는 작업