[JavaScript] SPA, MPA, SSR, CSR

hana jeong·2022년 11월 16일
0

특강과 우아한테크 테코톡 을 보고 요약한 자료입니다
틀린 부분이 있다면 말씀해주세요

SPA란?

SPA란 말 그대로 Single Page application의 줄임말이다

SPA는 처음 페이지를 로드할 때를 제외하고 새로운 페이지 요청이 있을 때 새로운 데이터를 받아와 클라이언트단에서 페이지를 갱신한다
ex: 리액트, 뷰, 앵귤러

MPA란?

출처는 microsoft learn

MPA는 Multiple Page Application의 약자이다
이미지의 왼쪽을 참고하면 이해하기 더 편할 것이다
페이지를 이동할 때마다 서버에 새로운 html을 요청하여 전체를 재랜더링하는 것이다
ex: php, jsp

SSR CSR이란?



(출처는 https://www.growth-rocket.com/blog/a-closer-look-at-client-side-server-side-rendering/)

SSR은 Server Side rendering, CSR은 Client Side Rendering의 약자이다. 말 그대로 서버쪽에서 렌더링할 것이냐 클라이언트쪽에서 렌더링할 거냐는 말이다

CSR
동작원리 : 클라이언트단에서 서버에 콘텐츠를 요청 -> 서버는 뼈대만있는 html 응답으로 보냄 -> 클라이언트쪽에서 js 파일을 받아 동적으로 페이지 렌더링
단점 :

  • js파일을 받아 동적 DOM을 생성해야하기 때문에 처음 로딩속도가 느림
  • seo(검색엔진 최적화)에 불리함
    장점 :
  • 초기로딩 이후 페이지 이동시 이에 따른 필요한 데이터만 서버에 요청하기 때문에 속도가 빨라짐
  • 빈 html 파일만 넘겨주면 되기 때문에 서버 과부하 정도 낮아짐
  • 클라이언트쪽에서 연산, 라우팅 등을 직접 처리 -> 반응속도 up, ux 우수
  • TTV와 TTI간에 시간간격 x

SSR
동작원리 : 클라이언트단에서 서버에 콘텐츠 요청 -> 렌더링 준비를 마친 html 파일, JS code를 응답으로 보냄 -> 브라우저에서는 전달받은 페이지 바로 띄움, js code 다운로드 후 html에 js로직 연결
장점 : 초기구동속도 빠름
단점 :

  • 모든 데이터가 html 파일에 담긴채로 브라우저에 전달 -> seo에 유리
  • TTV(time to view)와 tti(time to interact)간에 시간 간격 존재

SSG(Static Site Generation) = 정적렌더링

  • 서버에서 html을 보내준다는 측면에서 ssr과 비슷
  • ssr은 서버에서 요청시 즉시 html을 만들어 응답 -> 데이터가 자주 바뀌어 미리 만들어두기 어려운 페이지에 적합
  • ssg는 페이지들을 서버에 모두 만들어둔 뒤에 요청에 따라 해당 페이지를 응답함 -> 바뀔 일이 없는 페이지에 적합
profile
https://developer-hh.tistory.com 로 옮깁니다

0개의 댓글