SPA와 MPA

윤영훈·2021년 8월 19일
0
  • SPA (Single Page Application)

하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 애플리케이션이다.

  • MPA (Multiple Page Application)

사용자가 페이지를 요청할 때마다, 웹서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 애플리케이션입니다.

SPA가 사용하는 렌더링 방식은 CSR이고, MPA는 SSR입니다.

CSR

CSR에서는 처음에 브라우저가 웹 서버에게 HTML과 JS 파일을 요청한 후 로드되면 사용자의 상호작용에 따라 JS를 이용해 동적으로 렌더링 시킵니다.

장점

  • 첫 로딩만 기다리면 동적으로 빠르게 렌더링 되기 때문에 사용자 경험(UX)가 좋다.
  • 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다.

단점

  • 처음 모든 스크립트 파일이 로드될때 까지 기다려야 한다.
  • 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(SEO)의 문제가 있다.

SSR

SSR에서는 브라우저가 페이지를 요청할 때마다 해당 페이지와 관련된 HTML,CSS,JS 파일 및 데이터를 받아와서 렌더링 시킨다.

장점

  • 초기 로딩 속도가 빠르기 떄문에 사용자가 컨테츠를 빨리 볼 수 있습니다.
  • JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능합니다.

단점

  • 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않습니다.
  • 서버에 매번 요청을 하기 때문에 서버의 부하가 커집니다.

0개의 댓글