[knowledge] SPA vs MPA 개념, 장단점 [5/31 study]

 

 

SPA vs MPA 개념, 장단점

 

 

 

 

❗️SPA (Single Page Application)란?

SPA는 이름 그대로 단일 HTML 페이지로 구성된 웹 애플리케이션입니다.

사용자가 애플리케이션을 처음 로드할 때, 서버로부터 하나의 HTML 페이지를 받아오고 이후의 모든 상호작용은 JavaScript를 통해 이루어집니다.

특징:

• 동적 데이터 로딩: 사용자가 페이지 내에서 링크를 클릭하거나 동작을 수행할 때마다 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 서버로부터 받아와서 화면의 일부만 업데이트합니다.
• 빠른 사용자 경험: 전체 페이지를 새로고침하지 않기 때문에 애플리케이션이 빠르고 부드럽게 동작합니다.
• 클라이언트 사이드 라우팅: URL 변경 시 전체 페이지를 다시 로드하지 않고 JavaScript를 통해 다른 화면을 보여줍니다.

장점:

• 부드러운 사용자 경험: 페이지 이동 시 깜박임이 없고, 빠른 반응성을 제공합니다.
• 효율적인 리소스 사용: 필요한 데이터만 서버로부터 받아오기 때문에 대역폭 사용이 줄어듭니다.

단점:

• 초기 로딩 시간: 처음 애플리케이션을 로드할 때 모든 리소스를 받아오기 때문에 시간이 걸릴 수 있습니다.
• SEO 최적화 어려움: 클라이언트 사이드 렌더링 때문에 검색 엔진이 콘텐츠를 인덱싱하기 어려울 수 있습니다.

❗️MPA (Multi Page Application)란?

MPA는 여러 개의 HTML 페이지로 구성된 전통적인 웹 애플리케이션입니다.

사용자가 페이지 간 이동할 때마다 새로운 HTML 페이지를 서버로부터 받아옵니다.

 

특징:

• 독립적인 페이지 구조: 각 페이지가 독립적인 HTML 파일로 존재하며, 사용자가 페이지를 이동할 때마다 새로운 페이지를 서버로부터 로드합니다.
• 서버 사이드 렌더링: 각 페이지는 서버에서 렌더링되어 클라이언트로 전송됩니다.

장점:

• SEO 친화적: 각 페이지가 독립적으로 존재하기 때문에 검색 엔진이 쉽게 인덱싱할 수 있습니다.
• 초기 로딩 시간 단축: 각 페이지는 독립적으로 로드되므로 초기 로딩 시간이 짧습니다.

단점:

• 느린 페이지 전환: 페이지 간 이동 시 전체 페이지가 다시 로드되므로 사용자 경험이 SPA에 비해 떨어질 수 있습니다.
• 복잡한 서버 설정: 서버에서 각 페이지 요청을 처리해야 하므로 서버 설정이 복잡해질 수 있습니다.

❗️SPA와 MPA의 선택 기준

프로젝트의 요구사항에 따라 SPA와 MPA 중 적절한 아키텍처를 선택하는 것이 중요합니다. 다음은 선택 시 고려해야 할 몇 가지 기준입니다.

1. 사용자 경험: 부드럽고 빠른 사용자 경험이 중요한 경우 SPA가 적합합니다.
2. SEO 최적화: 검색 엔진 최적화가 중요한 경우 MPA가 더 나은 선택일 수 있습니다.
3. 애플리케이션 복잡도: SPA는 클라이언트 사이드에서 많은 로직을 처리하기 때문에 복잡한 프론트엔드 개발이 필요합니다.
4. 페이지 수: 페이지 수가 많고 각각의 페이지가 독립적인 콘텐츠를 제공해야 하는 경우 MPA가 적합합니다.

🔥마무리

SPA는 부드럽고 빠른 사용자 경험을 제공할 수 있지만 SEO 최적화가 어렵다는 면이 있고, MPA는 SEO에 유리하지만 페이지 전환할 때 속도가 다소 느릴 수 있다는 장단점을 가지고 있기 때문에 프로젝트의 목적? 요구사항에 따라 잘 선택해야 겠다는 생각이 듭니다! 오늘도 화이팅!!