MPA(SSR) / SPA(CSR)

이동주·2022년 4월 29일
0

1. MPA / SPA

(1) MPA

: Multi Page Application의 약자로 여러 페이지로 구성된 웹 어플리케이션
사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식

요청할 때마다 서버로부터 새로운 파일을 불러옴

(2) SPA

: Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션
브라우저에 최초에 한번 페이지 전체를 로드, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩
SPA는 현재 웹개발의 트랜드로 볼 수 있고, react와 vue, 앵귤러와 같은 자바스크립트 프레임워크 등이 spa의 방식을 가지고 있음

초기 로딩 이후, 요청 할 때마다 json 파일의 데이터만 받아옴

2. SSR / CSR

(1) MPA(SSR)

: MPA는 SSR 방식을 채택
서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식

  • 브라우저 => 프론트서버 => 백엔드서버 => 데이터베이스 순서대로 데이터 요청 후,
    다시 데이터베이스 = 백엔드서버 => 프론트서버 => 브라우저 순서대로 데이터를 줌
  • 이 과정에서 받은 데이터를 백엔드에서 html에 합쳐서 브라우저에 보냄
  • 왕복과정이 복잡한 편

SSR 장단점

  • 장점
    • 전체가 한번에 그려짐
    • 검색엔진최적화에 유리(모든 데이터가 이미 html에 담겨진채로 브라우저에 전달되기 때문)
    • 빠른 초기 로딩(서버로부터 화면을 렌더 하기 위한 필수적인 요소를 먼저 가져오기 때문)
  • 단점
    • 로딩 속도가 오래 걸림
    • 매번 페이지를 요철할 때마다 새로고침(깜박임, 사용자 경험이 떨어짐)
    • TTV(Time To View)와 TTI(Time To Interact) 간에 시간 간격이 존재
    • 서버 부화(새로운 요청이 생길 때마다 바뀌지 않아도 되는 부분도 렌더링)

(2) SPA(CSR)

: SPA는 CSR 방식을 채택
사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식
서버 사이드 렌더링 방식과 다른 점은 모든 js 파일을 다운받아 하기 때문에 초기 로딩 시간의 더 오래 걸린다는 점

  • 브라우저는 프론트서버에 js, css, html, img 같은 파일들만 먼저 받아 사용자 화면에 그림(데이터 x)
  • 이외의 다른 데이터들이 받아지기 전까지 로딩중임을 표시
  • 브라우저는 백엔드서버에 바로 데이터를 요청함
  • 브라우저가 데이터를 받으면 사용자 화면에 그려짐

CSR 장단점

  • 장점
    • 사용자에게 먼저 화면을 빠르게 보여줌
    • 사용자 친화적(깜박임 x)
    • 초기화면 렌더링 이후 빠른 속도로 렌더링
  • 단점
    • 데이터까지 받아오는 전체적인 시간은 사실 더 걸릴 수 있음
    • 첫 화면에 로딩창만 보여지게 되면 검색엔진 순위가 확 떨어질 수도 있음(웹 크롤러가 페이지를 색인화 하려고 하면 내용의 빈 페이지처럼 보이게 됨)
    • 초기 로딩 속도 느림(모든 js 파일을 다운 받아와야 해서)

3. 렌더링 방식 선택 기준

SSR

  • 상위 노출의 필요
  • 누구에게나 동일한 내용 노출
  • 페이지마다 자주 바뀌는 데이터

CSR

  • 개인정보 데이터를 기준으로 구성
  • 보다 나은 사용자 경험 필요
  • 상위 노출 < 고객 데이터 보호

=> 서비스와 콘텐츠의 성격에 따라 달라짐

profile
안녕하세요 이동주입니다

0개의 댓글