SPA, MPA, SSR, CSR

Sbae·2024년 2월 13일
0

목적

  • SPA, MPA의 차이
  • SSR, CSR의 차이

2계층 구조 (2 Tier Architecture Structure)

과거의 웹사이트는 흔히 말해서 F/E, B/E가 물리적으로 한 곳에 같이 있는 구조.

  • 비교적 쉽게 개발이 가능하다.
  • 구조가 단순하여 초기 서비스, 웹 사이트들이 많이 사용하는 구조
  • 속도 문제, 관리의 문제로 추후 재설계하기도 한다.

2 tier architecture


3계층 구조 (3 Tier Architecture Structure)

F/E와 B/E가 분리되어 있는구조

  • F/E와 B/E가 따로 나누어져있어서 각각으로 배포할 수 있다.

3 tier architecture


MPA(Multi Page Application), 다중 페이지 응용프로그램

전통적인 Web App 개발 방식이다.

  • JSP, PHP 등과 같은 언어로 구축된 사이트에서 많이 보인다.
  • 브라우저에서 특정 페이지를 서버로 요청하면 HTML 문서로 응답한다.
  • 전체 페이지가 새로고침 되면서 다시 렌더링한다.
  • 장점
    • SEO(Search Engine optimization, 검색 엔진 최적화)에 유리
      • 서버로부터 HTML 파일을 받기 때문에 크롤링을 통하여 검색하기에 적합하다.
    • 첫 로딩 시간이 매우 짧다.
      • 서버에서 이미 렌더링 된 하나의 HTML 파일을 가져오기 때문에 빠르다.
    • 자료가 많다
      • 전통적인 방법이기 때문에 예전부터 쌓여온 자료들을 참고할 수 있다.
  • 단점
    • 트래픽 증가
      • 페이지가 바뀔 때마다 전체 HTML으로 응답해야하기 때문에 부담이 증가한다.
    • 자그마한 변화라도 생기면 전체 HTML 파일을 새로 불러와야한다.
    • 새로운 페이지를 이동하면 ‘깜빡’인다.
    • 불필요한 템플릿도 중복해서 로딩해야한다.

MPA


SPA(Single Page Application), 단일 페이지 응용 프로그램

MPA의 단점을 개선하기 위해서 생겼다,

  • 하나의 HTML 파일을 가지고 나머지는 JS를 사용하여 화면을 동적으로 구현한다.
  • 데이터가 변경되면 그 부분만 바뀔 수 있다.(새로고침 없음)
  • 장점
    • 필요한 부분만 로딩이 가능하다.
      • 자그마한 변화가 생기면 그 부분만 새롭게 바꿔서 표현해 줄 수 있다.
    • UI/UX의 이점
      • 무언가를 클릭할 때 기다림이 없어서 모바일, 데스크탑 앱을 이용하는 느낌을 준다.
    • F/E, B/E의 분리
      • 각각의 수정, 배포가 가능해지며 SSR code를 작성할 필요가 없다.
    • 트래픽 감소 ► 성능
    • 컴포넌트별 재사용 ► 생산성
    • 모바일 앱 개발 시 동일한 API를 사용가능하다.
  • 단점
    • 초기 구동 속도의 문제
      • 처음 실행 시 모든 정적 리소스를 받아오기 때문에 초기 구동 속도가 느리다.
        • Webpack의 code splitting으로 해결 가능 ◀︎ 공부 필요
    • SEO의 최적화가 어려움
      • SSR로 해결 가능
    • 보안 문제
      • SSR에서는 사용자 정보를 서버 세션에서 관리가 가능하지만 CSR은 쿠키말고는 딱히 방법이 없다.

SPA


SSR(Server Side Rendering)

서버 쪽에서 렌더링 준비를 마친 상태로 클라이언트한테 전달하는 방식

  • MPA - 기존 웹 사이트를 생각하면 편하다.
  • 페이지 새로고침 되는 것

CSR(Client Side Rendering)

클라이언트 쪽에서 렌더링하는 방식

  • 서버는 모든 HTML, JS와 같은 정적 리소스를 한 번에 보내준다.
  • 이것을 받은 클라이언트가 렌더링을하고 변화가 생기는 부분은 해당하는 부분만 새로 렌더링한다.

개선되고 있는 점

  • 요즘에는 SSR을 지원하는 프레임워크가 생겨서 처음에 데이터가 채워져 있는 HTML 파일을 받아서 SEO 문제를 해결하고 다음 페이지부터는 CSR 방식이 적용되어 서버의 부하도 줄이는 방식이 생겼다.

출처

profile
끄적이는 일반인

0개의 댓글