[TIL] SPA, MPA, CSR, SSR

lnhyen43·2021년 10월 24일
0

CS지식

목록 보기
13/14

1. 웹의 역사와 발전

1세대 웹: 전통적인 Web System Architecture 정적 웹.

예) 위키피디아처럼 정보를 제공하는 HTML만 보여지는 웹 페이지

2세대 웹: User Interaction 증가. 동적 웹(자바스크립트)

MPA(Multi Page Application)

3세대 웹: SPA(Single Page Application), 백엔드와 프론트엔드의 구별

SPA

  • 브라우저에서 자바스크립트로 화면을 그림

SPA vs MPA

  • 가장 큰 차이: 새로고침(깜빡임)
  • 모바일이 대세인 최근, 적은 트레픽과 빠른 인터렉션이 중요해 SPA와 잘 맞는다.

2. CSR vs SSR

  • 차이점: 가장 첫 요청에 html이 들어있느냐 아니냐!

CRA(Create React App)

아무런 초기 설정 없이도 CRA를 통해 React 기반의 SPA 사이트를 구현할 수 있게 됨

  • 단점: CRA로 만든 프로젝트는 검색이 안됌(SEO 문제)
  • 이유: CSR(Client Side Render)로 실행되기 때문이다.

SEO(Search Engine Optimize)

웹 클로러가 각 사이트를 돌아다니며 조사를 하고 있는 상황이고, 이를 구글 DB에 반영하여 검색 엔진의 형태로 만듦

CSR이 SEO에 반영이 안되는 이유?
1) index.html(빈 페이지) > javascript(페이지 로드) > react
2) 처음 다운로드 된 페이지가 빈 페이지이기 때문에 검색 노출 안 됌

SSR?
1) index.html(차있는 페이지)
2) 검색 노출이 됨

CSR

출처: The Benefits of Server Side Rendering Over Client Side Rendering

  • SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전체적인 페이지 완료 시간은 SSR보다 느려진다.
  • app.js 에 모든 내용(react,vue,angular 포함)이 다 있음
  • 단점
    1) 첫 로딩까지 시간이 오래 걸림
    2) HTML이 빈 페이지이기 때문에 SEO가 좋지 않음

SSR

출처: The Benefits of Server Side Rendering Over Client Side Rendering

  • 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
  • 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여지는 콘텐츠 구성은 빨라진다는 장점
  • SSR을 직접 사용하려면 복잡함 => 생산성을 위해 Next.js를 사용
  • 장점
    1) 첫 페이지 로딩이 빠름
    2) SEO 좋음
  • 단점
    1) 사용자가 클릭을 하게되면, 전체적인 웹사이트를 받아오는 것이기에 안 좋은 user exprience
    2) 서버의 과부화
    3) 동적으로 처리하는 자바스크립트 다운로드가 늦기 때문에 반응이 없는 경우가 발생할 수 있음

TTV, TTI

  • TTV(Time To View)
  • TTI(Time TO Interact)

Next.js

  • SSR을 지원하는 라이브러리
    1) 첫 페이지를 "/"로 호출하면 SSR로 렌더링 > HTML 파일로 완성
    2) 'Link' 컴포넌트를 사용해 라우팅을 하면 CSR이 이뤄짐

CSR vs SSR 정리

  1. 속도
  • 초기 전송되는 데이터(페이지): CSR > SSR
  • 사용자들이 보는 페이지: CSR < SSR
  1. SEO 취약성
  • CSR이 SEO에 취약하다.
  • 다만, 서비스가 SEO가 필요한 가에 대한 고민이 있어야한다.
    (어드민 페이지의 경우 CSR로 만드는 게 나을 수 있다.)
  1. 비용 문제
  • CSR은 트레픽 비용만 지불하게 된다.
  • SSR은 매번 서버에서 로직을 실행하는 비용을 추가하게 되어 CSR과 비교해 수백~ 수천배까지 차이가 날 수 있다.

결국, 프로젝트나 서비스 구성에 맞는 방법을 사용해야한다.

참고자료
1. https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#pwa-progressive-web-app
2. https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
3. https://www.youtube.com/watch?v=iZ9csAfU5Os

profile
technology blog

0개의 댓글