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

1. SPA와 MPA

 

렌더링이란?

: 웹 애플리케이션 상에서 데이터를 표시하는 행위

 

🌻 SPA(Single Page Application)

 

SPA는 한 개의 페이지로 구성된 애플케이션으로 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 읽음으로써 사용자와 소통하는 웹 앱이다. 이러한 방식은 연속되는 페이지가 렌더링하면서 주는 불편함을 줄여주기 때문에 사용자 경험의 간섭을 막아주고 더욱 자연스럽게 동작하도록 만들어준다.

 

🌻 SPA의 특징

• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 받아온다
• 이후 새로운 데이터 요청이 있을 때 필요한 데이터만 전달받아서 페이지를 갱신하기 때문에 반응성이 좋다
• 때문에 SPA는 CSR(Client Side Rendering)방식으로 렌더링한다
• 웹페이지 내용이 모두 동적으로 변함

🌻 SPA의 장단점

   [장점]

• 서버가 해야 할 역할을 클라이언트가 부담하므로 서버 부담이 경감 -> 성능 개선
• 모듈화 및 컴포넌트 개발에 용이 -> 생산성 향상
• 서버에 정적리소스를 한 번만 요청하고 받은 데이터는 저장 해놓는다 -> 성능 개선
• 백엔드와 프론트 개발 영역을 명확하게 구분
• 자연스러운 UX(사용자 경험) -> 전체 페이지를 업데이트할 필요가 없기 때문에 빠르고 '깜빡'거림이 없다
• 모바일 앱 개발 시 동일한 API를 사용하도록 설계 가능 -> 생산성 향상

   [단점]

• 초기 구동 속도가 느림 -> 처음 렌더링 시, 모든 리소스를 한 번에 다 받기 때문
• 클라이언트에 중요 비지니스 로직이 노출될 수 있음 -> 보안에 취약함
• 검색 엔진 최적화(SEO)가 어려움 -> 페이지가 로딩되어야 리소스가 보이므로, 검색에 노출이 안됨.

---

🌻 MPA(Multi Page Application)

MPA 여러 개의 페이지로 구성된 애플리케이션으로 브라우저에서 변경사항이 있을 때 서버로 데이터를 전달하여 새로운 페이지 렌더링을 요청하고 그 데이터를 표시한다. 

 

🌻 MPA의 특징

• 매번 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML,CSS,JavaScript)를 받아온다
• 페이지 이동이나 새로고침시 전체 페이지를 다시 렌더링한다
• 때문에 MPA는 SSR(Sever Side Application)방식으로 렌더링한다
• 규모가 SPA보다 크다
• 웹사이트가 모두 문서로 작성되어 있음

🌻 MPA의 장단점

   [장점]

• SEO관점에서 유리함 -> MPA는 완성된 형태의 HTML 파일을 받기 때문에 페이지를 크롤링하기에 적합
• 첫 로딩이 짧다 -> 서버에서 이미 렌더링하여 가져옴

   [단점]

• 프론트엔드와 백엔드 간 개발 업무가 밀접하게 연관됨
• 첫 로딩이 짧지만 클라이언트가 JS파일을 다운로드하고 적용하기 전까지는 각각의 기능은 동작하지 않음
• 새로운 페이지 이동시 깜빡임 -> UI적으로 매끄럽지 못함
• 매 페이지 요청마다 리로딩(새로고침) 발생 -> 새로운 페이지 요청마다 전체 페이지를 다시 렌더링하기 때문
• 페이지 이동시 불필요한 템플릿도 중복해서 로딩
• 서버 렌더링에 따른 부하
• 모바일 앱 개발시 추가적인 백엔드 작업이 필요하여 개발이 복잡해질 수 있음

 

2. SSR vs CSR

🌻 SSR(Server-Side Rendering) ?

웹의 처음 시작은 MPA 이었는데,  SPA에 대한 구현체들이 나오기 전까진 모두 MPA 형태로 웹을 서비스 해왔다.

 

MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다.

모든 템플릿은 서버상에서 렌더링을 마치고 클라이언트는 이것을 받아서 실행한다.

🌻 SSR 장점

SEO(검색 엔진 최적화)가 장점이다. 전통적인 MPA의 경우 브라우저에서 JavaScript 코드가 동작하기 전에도 완성된 형태의 템플릿을

서버로부터 전달받는다. 이 때문에 검색로봇이 펭지를 크롤링하기에 매우 유용하다

 

 

🌻 CSR(Client-Side Rendering) ?

클라이언트 단에서 렌더링하는 방식을 말한다.

최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다. SEO가 어렵다는 단점이 있지만 개선할 방법은 있다.