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

 

SPA와 MPA 표로 간단하게 정리하기

구분	SPA (Single Page Application)	MPA (Multi Page Application)
정의	한 개의 페이지로 구성된 어플리케이션	여러 개의 페이지로 구성된 어플리케이션
특징	웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 한다.	새로운 페이지를 요청할 때마다 정적 리소스가 다운된다.
렌더링	CSR (Client Side Rendering) 방식 👉🏼 클라이언트 단에서 렌더링 진행	SSR (Server Side Rendering) 방식 👉🏼 서버 단에서 렌더링을 마치고 클라이언트는 받아서 실행
장점	리렌더링으로 인한 깜빡임이 없어 유연한 UI, 자연스러운 UX 구현이 가능하다.	유저가 보는 화면 방식이 웹 크롤러가 보는 방식과 같아 SEO에 유리하다.
단점	페이지가 하나 뿐이라 웹 페이지 내용을 크롤링하기 어려워 SEO 노출이 어렵다.	요청이 들어올 때마다 페이지를 리렌더링하며 페이지가 로드될 때까지 기다려야 해 유저친화적이지 않다.