TIL #7 - SPA와 MPA

 

TIL #7 - SPA와 MPA

 

 

 

 

 

📜 목표

• SPA와 MPA의 개념에 대해 이해한다.
• SPA와 MPA의 각 장단점에 대해 이해한다.

 

---

 

SPA와 MPA란❓ 

 

SPA

• Single Page Application : 한 개의 Page로 구성된 Application
• 하나의 HTML을 한번만 받아와서 JS를 이용하여 Contents만 변경하는 방식
• 처음에만 페이지를 받아오고 이후는 동적으로 DOM을 구성
• CSR 방식 (SPA === CSR 은 아니다 ❌)
• 요청이 있을경우 필요한 데이터만 다운로드됨. (페이지 구성에 필요한 모든 파일 다운로드 ❌)
• AJAX와 REST API로 서버에 데이터를 요청 및 JSON으로 응답받음.
• 사용자는 여러 페이지가 존재한다는 경험을 할 수 있다.

 

 

 

 

MPA

• Multiple Page Application : 여러 개의 Page로 구성된 Application
• 여러개의 HTML을 보여주는 방식 (화면마다 존재.)
• 요청이 있을때마다 정적인 resource가 다운로드됨.
• 페이지 구성에 필요한 모든 resource가 다운로드 되고 다시 렌더링됨.
• SSR 방식 (MPA === SSR 은 아니다 ❌)

 

 

---

 

SPA와 MPA의 장단점

 

 

SPA

 

장점

• 페이지 렌더링 시 깜빡거림이 없다.
• 필요한 부분만 업데이트하기 때문에 비교적 속도가 빠르다.
• 컴포넌트별 개발이 용이하다.
• 클라이언트와 서버의 확실한 분리 (개발의 복잡성과 서버의 부담이 줄어든다.)

 

 

단점

• 첫 페이지에서 모든 resource를 다 다운로드 받기 때문에 초기 페이지 로딩 속도가 느리다.
• SEO가 어렵다.

 

---

MPA

 

장점

• SEO에 유리하다.

 

단점

• 요청이 들어올때마다 페이지의 모든 부분을 다운로드 받아야 하여 속도가 느리다.
• 렌더링 시 깜빡거림이 존재한다.
• 클라이언트와 서버가 밀접한 관계를 맺는다. (개발이 복잡해진다.)

 

 

 

그럼 언제 어떤걸 사용 ❓

 

user의 interaction이 별로 없는 정적인 페이지 => MPA

 

user의 interaction이 많고 다양한 정보들을 동적으로 제공하는 페이지 => SPA

 

 

---

👨‍💻 마무리

 

CSR과 SSR은 렌더링 준비를 어디서 하느냐의 차이였다면, 

 

SPA와 MPA의 차이는 화면을 구성할 페이지를 한개만 사용할 것인지 여러개를 사용할 것인지의 차이라고 생각된다.

 

즉,  CSR과 SSR은 렌더링 방식, SPA,MPA는 웹페이지의 구성 방식이다.

 

 

각각의 어느 방식이 옳다는 것은 없다. 

 

각 개발 환경, 그리고 목적에 따라 적절한 방식을 채택해서 개발을 진행하면되므로

 

보다 중요한 건 앞서 말한 것들에 대한 목적을 이루기 위해선

 

이 SPA, MPA, CSR, SSR 개념들에 대한 차이에 대한 이해가 필수적이다.