MPA 그리고 SPA 두 가지 방식에 대해 설명하기에 앞서 일반적으로 웹 사이트에
접속하려면 서버에게 HTML 파일에 대한 요청을 보냅니다. 이후 클라이언트는 어떠한
요청을 주게 되는데 아래의 사진을 보면 두 가지의 차이점이 있는데 MPA 방식은
HTML을 리턴하고 있고 SPA는 JSON을 리턴하는 모습을 확인할 수 있습니다.
이 글을 읽기 전 CSR/SSR 설명 글을 먼저 참고하시면 이해에 도움이 됩니다.
[ CSR / SSR ] 웹 개발의 두 가지 렌더링 방법
MPA (Multi-Page Application)
- 위 사진에서
MPA방식은요청이 들어올 때 마다 데이터와 페이지 구조가 리로드되고 컨텍스트(호출, 응답 간의 환경 정보)가 사라지며 무수한 요청을 HTML 페이지에 담아 리턴하는 것을 확인할 수 있습니다.
- 핵심은 요청이 있을 때 마다 페이지를 리로드한다는 것 이고
아주사소한 버튼 클릭 한 번에도 매번 전체 페이지를 재렌더링합니다.
'MPA'의 장점
SEO 관점에서 유리하며 그 이유는 이미 완성된 형태의 HTML 파일을 서버에서
전달받기 때문에검색엔진이 페이지를 크롤링하는 데에 유리합니다.'MPA'의 단점
사소한 변화에도 매번 페이지 전체를 새로 불러오기 때문에 성능상에 이슈가 있고
프론트와 백이 밀접하게 연관되어 있기 때문에개발 복잡도가 증가합니다.
'MPA'의 작동 방식 요약
- 새로운 페이지를 요청할 때마다 서버에서 렌더링된
정적 리소스(HTML,CSS,JS)가 다운로드 됩니다.
- 페이지를 이동하거나 새로고침 시 전체 페이지를 재렌더링 합니다.
MPA는SSR(Server Side Rendering)방식으로 렌더링 합니다.
SPA (Single-Page Application)
- 위 사진은
URL에 따라Header,Menu,Footer는 고정된 상태로 필요한
요소만 로드하고 있는데 이는전체 앱을 로드하는 것이 아닌 필요한 요소만 로드
하는 것 입니다.
MPA는 서버에서 완성된 페이지를 보내주지만SPA는 브라우저가 업무를
처리하고 있음을 알 수 있습니다. 이게 가능한 이유는JS가DOM을 다룰 수 있는
스크립트 언어이며 웹 브라우저에 사용되는 유일한 프로그래밍 언어이기 때문입니다.
DOM(Document Object Model)은 무엇인가요? :
HTML, XML 문서의 프로그래밍 인터페이스로 문서의 구조화된 표현을 제공합니다.
'SPA'의 장점
- 페이지를 빠르게 업데이트하고 모바일과 코드의 재사용을 지원하며
CSR에서 개발이 간소화 되고 공용 저장소를 통해 오프라인에서도
데이터 사용이 가능합니다.'SPA'의 단점
- 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만
다운로드하기 때문에 초기 구동 속도가 상대적으로 느립니다.
'SPA'의 작동 방식 요약
SPA는 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 1회 다운로드
- 이후 새로운 페이지를 요청 시 페이지 갱신에 필요한 데이터만을
JSON으로
전달 받아 페이지를 갱신하며 기존 페이지의 내부를 수정해서 보여주는 방식입니다.
SPA는 일반적으로CSR(Clinet Side Rendering)방식으로 렌더링 합니다.
그래서 어떤 방식이 더 좋을까?
SPA와MAP는 서로 다른 종류의 최적화된UX를 제공합니다.
각각 장단점이 있으며 사용 사례와 상황에 알맞은 선택을 하는 것이 사용자에게
빠르고 또 안정적인 경험을 제공해줄 수 있습니다.
쿠팡,무신사와 같은 여러 제품 및 서비르를 다루는 전자 상거래 상점을
만들거나 다른 많은 콘텐츠가 필요하다면MPA방식이 적합하고 소셜 플랫폼을
만들고 싶다면SPA가 적합할 것 입니다.
블로그 글 작성 시 참고한 자료입니다. 😊😁
컴공 편입 폴붕이의 일상