싱글 페이지 앱 vs 멀티 페이지 앱

혜미·2021년 11월 23일
0

TIL

목록 보기
27/29
post-thumbnail

해시값 사용해서 싱글페이지 웹사이트를 만드는 방식과 페이지 여러개인 웹사이트를 만드는 방식에 어떤 차이가 있는지 잘 모르겠어서 답답했는데, 이 글을 읽고 궁금증이 어느 정도 해결이 돼서 글 내용을 간단하게 정리해 봤다.

MPA(Multi Page Application)

  • 데이터를 주고 받을 때마다 서버에 새 페이지를 요청한다.
    서버에 페이지 요청 -> 클라이언트에게 전송 -> 브라우저에 띄우기
  • 시간이 걸리기 때문에 UX에 영향 줄 수 있다.
    하지만 AJAX 가 있어서 특정 컴포넌트만 렌더링할 수 있어서 이 문제는 해결할 수 있는 것 같다. 다만 개발 과정이 좀 더 복잡해진다는 단점이 있다.
  • SEO(검색 엔진 최적화)가 쉽다는 장점이 있다.

SPA(Single Page Application)

  • 로직을 서버가 아닌 브라우저에서 실행한다.
    그래서 MPA에 비해 속도가 빠르다.
  • 맨 처음 페이지를 로딩한 다음에는 전체 HTML이 아니라 데이터만 주고 받기 때문에 더 적은 대역폭을 사용한다는 장점이 있다.(대역폭이 뭔지는 아직 잘 모름)
  • 사이트 간 스크립팅(cross-site scripting) 때문에 MPA에 비해 보안이 약하다.
  • SEO가 어렵다는 단점이 있다.

내가 만들 웹사이트의 특징(단일 제품 파는 쇼핑몰 vs 여러 제품 파는 쇼핑몰, 그래픽이 많은가 vs 컨텐츠가 많은가, 실시간 서비스가 많은지 vs 아닌지)을 생각해 보고, 비즈니스고객의 입장을 고려해서 MPA, SPA 중에 적합한 방식을 선택해야 한다.


✨ 음... 그러니까 둘 중에 뭐가 더 좋다 나쁘다 얘기할 수 있는 건 아니고 웹사이트가 제공하는 서비스에 적합한 방식을 선택하면 된다. -> 이렇게 이해하면 될 것 같다.

0개의 댓글