[React] SPA와 MPA

SPA?

Single Page Application

한개의 페이지로 구성된 애플리케이션

 

하나의 페이지로만 동작하는 구조

필요한 부분만 불러와 성능 향상에 큰 기여를 한다

새로고침 없이 필요한 부분만 수정해 reload되는 문제가 없다

유연한 UI와 자연스러운 UX구현이 가능하다

 

웹 어플리케이션에 필요한 모든 정적 리소스를 최소 한 번 다운로드 한다

이 때문에 초반 로딩 속도가 다소 걸린다는 점이 있다

 

하나의 페이지이기 때문에 SEO에 취약하다

이것을 방지하기 위해 Next.js가 탄생했다

SPA는 CSR 렌더링을 사용한다

 

MPA?

Multi Page Aplication

여러 개의 페이지로 구성된 애플리케이션

 

이미 만들어진 페이지를 서버에서 불러오는 구조

이벤트마다 웹페이지를 새로 로드하고 렌더링하여 중복되는 불필요한 작업으로 데이터를 잡아먹는다

또한 화면을 새로 그리기 위한 빈 화면을 이벤트마다 보기 때문에

화면 번쩍임(Flicker현상)으로 부자연스러운 UX 경험을 주게 된다

 

MPA는 SSR 렌더링을 사용한다

 

 

SPA와 MPA 차이

MPA의 사용자 경험을 해치는 화면 깜빡임과 불필요한 작업, 서버 부하 등으로 탄생하게 된 SPA 

서로 상반된 구조라고 생각하면 편하다

 

	MPA	SPA
대표적인 특징	여러 페이지를 정적으로 구동	한 페이지에서 동적으로 구동
성능	이벤트마다 중복된 탬플릿까지 로드 후 리렌더링하여 서버 부하 초래	필요한 부분만 로드 후 동적으로 변화하여 서버 성능 향상
렌더링	SSR	CSR
SEO (검색엔진 최적화)	HTML로 이루어져 크롤링이 원활하다	JS로 이루어져 크롤링이 불리하다

 

 

 

React의 SPA 구현 방식

React는 대표적인 SPA 라이브러리다

상태(state)가 만들어지고, 상태가 변경되면 그 부분만 리렌더링한다

필요한 부분만 집어서 업데이트를 해주기 때문에 좋은 성능을 보여준다

이 외에도 React Router, State Management, Virtual DOM 등의 기술도 존재한다

 

참고자료

https://seons-dev.tistory.com/entry/React-SPA-MPA

[React] - SPA / MPA ?

https://oliviakim.tistory.com/92

[React]　SPA와 MPA 간단하게 알아보기

 

 

https://tadaktadak-it.tistory.com/157

[React] CSR vs SSR / SPA vs MPA / 리액트 라우터(React-Router)

https://cocoworld.tistory.com/73

[React/리액트] SPA vs MPA 비교하기 (차이점, 특징)