[CS] MPA(Multi Page Application) / SPA(Single Page Application)

MPA(Multiple Page Application)는 여러 개(하나 또는 그 이상)의 Page로 구성된 Application이다. 전통적으로 사용해 왔던 방식이며 오래된 웹 사이트들을 방문하면 모두 MPA 방식으로 제작되어 있는 것을 확인할 수 있다.

 

또한, MPA는 SSR(Server Side Application) 방식으로 렌더링 하며,

새로운 페이지를 요청할 때마다 서버에서 렌더링 된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.

 

<과거의 BBC의 홈페이지>

위 사진을 예시로 들면 모든 페이지에 알맞은 정적 리소스가 있으며 페이지에 방문 시 해당 리소스를 요청한다. 페이지 이동하거나 새로고침 하면 전체 페이지를 다시 렌더링 하게 되는 방식이다.

 

MPA는 다음과 같은 장단점을 가지고 있다.

Pros : 

• SEO에 상대적으로 유리하다.
  • MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다.
  • 검색엔진이 페이지를 크롤링하기 편리

Cons : 

1. UX가 상대적으로 떨어진다.
   • 매 페이지 요청마다 새로고침이 발생하는데, 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문이다.
   • 페이지 이동시 불필요한 템플릿도 중복해서 로딩하기 때문에 성능(속도) 저하를 야기할 수 있다.
2. 서버 렌더링에 따른 서버의 부하 발생

---

SPA(Single Page Application)는 모던 웹의 패러다임이다.

 

SPA는 기본적으로 단일 페이지로 구성되며 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한 번만 다운로드하여 필요시 리소스를 이용하여 애플리케이션에 리소스를 적용하여 변경하는 방식이다.

 

새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있고, 전체 페이지를 다시 렌더링 하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

 

모바일 사용이 데스크톱을 넘어선 현재, 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈이다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있기에 모바일 퍼스트(Mobile First) 전략에 부합한다.

 

다음은 SPA가 가지는 장단점을 볼 수 있다.

Pros : 

• 반응성이 뛰어나고 UI가 유연하다.
  • 초기 페이지 때 받은 리소스를 이용하여 유저의 요청에 따른 반응을 하기 때문에 즉각적이라고 느낄 수 있다.
• Front-End /  Back-End의 확실한 업무 분리가 가능하다.
• 컴포넌트를 재사용할 수 있다.
  • 하나의 컴포넌트에서 JS를 이용하여 유연하게 나타낼 수 있다.

Cons : 

• 모든 정적 리소스를 최초 접근 시 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.
• SEO(검색엔진 최적화) 이슈가 존재한다.

 

클라이언트 사이드 렌더링(CSR)은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는데, 이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다.

 

SPA는 애플리케이션에 적합한 기술이기에 SEO 이슈는 심각한 문제로 취급할 수 없다고 생각할 수도 있지만, 블로그와 같이 애플리케이션의 경우 SEO는 무시할 수 없는 중요한 의미를 갖는다.