[FE면접/CS] SPA vs MPA 개념 및 장단점(feat.SSR vs CSR)

이번 포스팅에서는 SPA와 MPA의 개념 및 장단점에 대해 다뤄볼 것이다.

 

SPA와 MPA는 모두 웹 애플리케이션의 두 가지 주요 아키텍쳐 패턴이다.

SPA와 MPA가 등장하게 된 배경은 무엇일까?

0. 웹 애플리케이션의 발전

MPA는 초기 웹 사이트가 나타났을 때부터 사용되었다. 초기의 웹 사이트는 단순한 HTML 파일들의 집합으로 구성되어 있었기 때문에, 다른 페이지로 이동할 때마다 서버에서 새로운  HTML 파일을 다시 로드해야 했다.

이러한 MPA 방식은 웹 기술이 발전함에 따라 점차 로드해야할 페이지가 많아지면서 MPA 방식의 단점들이 부각되었다.

 

웹 애플리케이션의 복잡도가 증가하면서 SPA 모델이 등장하게 되었다. SPA는 AJAX 기술을 이용하여 필요한 데이터만 서버에서 받아와서 필요한 부분만 동기적으로 업데이트하는 방식으로 동작한다. 이러한 SPA 방식은 초기 로딩 시간이 짧고, 사용자 경험이 원활하며, 서버 측에서 데이터를 더 적게 처리하므로 대체로 빠른 성능을 제공한다.

 

AJAX란?

• Asynchronous JavaScript and XML의 약자
• JS를 사용하여 비동기적으로 서버와 브라우저 간에 데이터를 교환하는 웹 개발 기술
• 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나

1. SPA

💡SPA란?
"Single Page Application" 의 약자로 한 개(Single)의 페이지로 구성된 애플리케이션이다.

1-1. 개념

SPA는 모던 웹의패러다임이다.

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.

SPA의 핵심 가치는 사용자 경험(UX) 향상에 있다. 초기 로딩 시간이 짧기에 사용자 경험이 원활하다.

Angular, React, Vue 등 다양한 프론트엔드 기술들이 나오면서 크게 유행하고 있다.

 

1.2. 작동 방식

SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한 번만 다운로드한다.

이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하는 방식으로 작동한다. 즉 기존 페이지의 내부를 수정해서 보여주는 방식이다.

 

SPA를 일반적으로 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다.

 

1.3. SPA 의 장점

1. 빠른 속도: 초기 로딩 시간이 짧아 향상된 UX를 제공한다.
2. 자연스러운 사용자 경험: 사용자가 애플리케이션을 사용하는 동안 페이지 이동이 없으며, 부드러운 사용자 경험을 제공한다.
3. 우수한 성능: Ajax를 사용하여 필요한 데이터만 서버에서 받아오기 때문에 불필요한 데이터 요청이 없어 서버 부하를 줄일 수 있다.
4. 높은 생산성: 컴포넌트별 개발이 용이하며, 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계가 가능하다.

 

1.4. SPA의 단점

1. 초기 로딩 속도: SPA는 초기 로딩 시간이 짧지만, SPA를 처음 방문하는 사용자의 경우, 필요한 자바스크립트 파일을 다운로드하고 해석하는 과정에서 초기 로딩 속도가 느려질 수 있다.
2. SEO 문제: SPA는 모든 콘텐츠가 JavaScript로 구축된다.(CSR방식) 때문에 Javascript를 읽지 못하는 검색엔진에 대해서 크롤링이 되지 않아 색인이 되지 않는 문제가 발생할 수 있다.
3. 보안 문제: XSS(교차 사이트 스크립팅)로 인해 공격자가 다른 사용자가 웹 응용 프로그램에 클라이언트 측 스크립트를 삽입할 수 있는 위험이 있다.

XSS란?

XSS(Cross-Site Scripting)는 웹 애플리케이션 취약점 중 하나로, 악성 사용자가 악의적인 스크립트를 삽입하여 다른 사용자의 브라우저에서 실행시키는 공격 기법이다. 일반적으로 웹 애플리케이션에서 사용자의 입력값을 검증하지 않거나, 검증하지만 충분히 안전하지 않은 방법으로 처리할 경우 발생할 수 있다.
XSS 공격을 방지하기 위해서는 사용자의 입력값을 적절한 방법으로 검증하고, 출력할 때는 안전한 방법으로 처리해야 한다. 또한, 쿠키의 HttpOnly 속성을 설정하여, JavaScript에서 쿠키에 접근하지 못하도록 방지할 수도 있다.

1.  

1.5. SPA 사용예제

더 나은 성능과 사용자 경험을 제공하는 대부분의 현대 웹 애플리케이션에서 일반적으로 SPA 아키텍쳐를 사용한다.

Gmail, Facebook, Twitter, Github 등이 대표적이다.

즉, 사용자에게 빠르고 안정적인 경험을 제공하는 민첩한 소셜 플랫폼의 경우 SPA 아키텍쳐를 사용하여 웹사이트를 구축하면 좋다.

 

 

2. MPA

💡MPA란?
"Multi-Page Application" 의 약자로 여러 개(Multiple)의 페이지로 구성된 애플리케이션이다.

2.1. 개념

MPA는 여러 개의 HTML 페이지를 사용하여 구상된 전통적인 웹 애플리케이션이다. 

각 페이지는 새로운 HTML 파일을 요청하여 서버에서 다시 로드된다. MPA는 전체 페이지를 다시 로드해야하므로 초기 로딩 시간이 길고, 사용자 경험이 다소 불편하며, 서버 측에서 데이터를 더 많이 처리하므로 느린 성능을 제공할 수 있다.

 

2.2. 작동 방식

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

페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링을 한다.

 

MPA는SSR(Server Side Rendering) 방식으로 렌더링한다.

 

2.3. MPA 의 장점

1. SEO 용이: 서버에서 모든 페이지를 렌더링하기 때문에 검색 엔진이 콘텐츠를 쉽게 인식할 수 있다.
2. 보안: 서버에서 콘텐츠를 렌더링하므로, 보안에 민감한 정보를 서버에서 안전하게 보호할 수 있다.
3. 확장성: 다중 페이지로 원하는 만큼 페이지를 추가할 수 있다.

 

2.4. MPA의 단점

1. 사용자 경험: 페이지 이동 시 새로운 페이지를 렌더링해야 하므로, 사용자 경험이 느릴 수 있다.
2. 성능: 페이지 이동 시, 불필요한 데이터 요청이 발생할 수 있어 서버 부하가 늘어날 수 있다.
3. 개발 시간: MPA는 다수의 페이지를 개발해야 하므로, SPA보다 개발 시간이 더 오래 걸릴 수 있다.
4. 까다로운 유지보수: 개발자는 모든 페이지가 안전한지 확인 해야하는데 페이지가 많아서 지속적으로 유지보수 하는 것이 어렵다.

 

2.5. MPA 사용예제

MPA 아키텍쳐를 사용하는 대표적인 웹사이트로는 Amazon이 있다. 아마존의 경우 제품이나 카테고리를 보려고할 때 페이지가 동일하게 유지되도록 유구하지 않는다.

MPA는 연속적인 접근이 필요하지 않는 복잡한 웹사이트에 가장 적합하다.

즉, 아마존, 이베이와 같이 여러 제품 및 서비스를 다루는 전자 상거래 상점이나 보안에 까다로운 컨텐츠 관리 시스템 등에서 MPA 방식을 사용하면 좋다.

 

3. SSR과 CSR이란?

SPA와 MPA는 클라이언트 측에서 렌더링을 처리하는 CSR(Client-side Rendering) 방식과, 서버 측에서 렌더링을 처리하는 SSR(Server-side Rendering) 방식으로 나뉜다.

CSR은 브라우저에서 Javascript를 사용하여 페이지를 렌더링하는 방식이다.

 

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

 

하지만, SEO에 문제가 있고, 초기 로딩 시간 이후에도 데이터 요청이 많이 발생하여 서버 부하가 증가할 수 있다.

 

SSR은 서버에서 렌더링을 처리하는 방식이다.

 

모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.

 

검색 엔진은 크롤러로 웹사이트를 읽는데, SSR은 애초에 Server Side에서 컴파일 되어 클라이언트 측으로 넘어오기 때문에 크롤러에 대응하기 용이하다.

 

 

그렇다면 CSR과 SSR은 언제 사용되는가?

다음은 CSR과 SSR의 사용 권장 예시이다.

	CSR	SSR
네트워크	빠를 때	느릴 때
SEO	검색 엔진 최적화가 필요 없을 때 (X)	검색 엔진 최적화가 필요할 때 (O)
최초로딩	사용자에게 보여줘야 하는 데이터의 양이 많을 때	최초 로딩이 빨라야할 때

 

 

 

[참고 및 읽어보면 좋을 자료]

https://off-dngw.github.io/posts/SSR-CSR/

https://d2.naver.com/helloworld/7804182

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/

https://d2.naver.com/helloworld/2177909

https://velog.io/@hlna0308/SPA%EC%99%80-CSR%EC%9D%80-%EA%B0%99%EC%9D%84%EA%B9%8C