SPA, MPA란? (Feat. SSR과 CSR의 차이)

https://medium.com/@egoossaert/what-are-single-page-applications-spa-94dd5a4fd10c

개요

SPA는 CloudFront와 S3를 이용해서 프론트엔드를 구성할 때 처음 접해본 용어이다. 개념이 확립되지 않아서 정리해보고자 한다.

 

SPA란?

SPA(Single-Page application) 이란 단일 페이지 애플리케이션을 의미하고 단일 웹 문서(HTML, CSS, JavaScript)만 로드한 다음 다른 콘텐츠의 경우 XMLHttpRequest 및 Fetch와 같은 JavaScript API를 통해 해당 단일 문서의 본문 콘텐츠를 업데이트하는 웹 앱 구현체이다.

결국 필요한 데이터만 비동기로 가져와 웹 브라우저가 동적으로 현재 화면에 다시 렌더링하는 방식을 의미한다. 사용자가 변경사항을 받아올 때 전체 HTML을 받아오는 방식이 아니라 화면 렌더링을 로컬 PC에서 즉시 생성해 더 빠르게 화면 전환을 처리할 수 있다.

결국 SPA는 정적 데이터를 여러번 불러오는 과거 전통적인 방식(MPA)으로 페이지 전환을 수행하지 않고 마치 하나의 페이지인 것처럼 전체 정적 데이터를 불러오고 필요한 데이터만 비동기로 가져와 처리하는 기술을 의미한다. 

 

MPA란?

MPA(Multi Page Application)는 다수의 HTML 페이지로 구성된 웹 애플리케이션이다. 각 페이지에는 사용자가 상호 작용할 때마다 새로 고쳐야 하는 다양한 콘텐츠가 표시된다. MPA는 클라이언트가 웹 문서(HTML, CSS, JavaScript)를 서버로부터 받아와야한다. 이렇게 되면 SPA와 비교해서 페이지를 로드하는 시간이 길어질뿐 아니라 서버에도 부하가 발생하게 된다. 정적 데이터를 여러번 불러와야하기 때문이다.

그러나 SEO와 같은 작업에서 장점이 있다. SEO는 웹 정보(HTML 태그, 본문 내용, 이미지)를 웹 크롤러가 수집해 사용자에게 유익하다고 판단되는 사이트를 순위별로 표시하기 위해 검색 상단에 위치하게끔 하는 작업이다. MPA 의 경우 크롤러가 페이지를 쉽게 이해하고 인식할 수 있어 SEO 작업이 훨씬 적합하다. 

 

장단점

SPA 장단점

• 장점
  • 사용자 경험 개선 : 앞서 말했듯이 서버에서 새 페이지 전체를 로드하는 대신 특정 본문 콘텐츠만 업데이트하여 훨씬 더 나은 사용자 경험을 제공할 수 있다.
  • 빠른 개발 과정 : 개발 과정에서 프론트엔드나 백엔드를 완전히 분리해 병렬로 작업이 가능하다. 개발자는 콘텐츠에 영향을 주거나 백엔드 기술에 대해 걱정하지 않고 변경 또는 구축, 실험할 수 있다.
  • 크로스 플랫폼 호환성 : 개발자는 단일 코드베이스를 사용해 모든 장치, 브라우저 및 운영 체제에서 실행될 수 있는 애플리케이션을 구축할 수 있다. 어디서나 SPA를 사용할 수 있어 소비자 경험을 향상 시킨다.
  • 서버 부하 감소 : 서버가 렌더링을 수행하는 데 시간과 에너지를 소비할 필요가  없어 SPA는 서버 전체에 미치는 영향을 낮춰 동일한 양의 트래픽에 대해 더 적은 수의 서버를 사용해 비용을 절약할 수 있다.
• 단점
  • 보안 위험 : 클라이언트 측에서 대부분의 작업이 수행되며 모든 코드가 실행되므로 SPA는 브라우저 내에서 실행되는 악성 코드를 주입할 수 있는 공격에 취약하다. 이러한 공격은 콘텐츠 보안 정책(CSP)을 포함한 적절한 보안 조치를 따르면 예방 가능하다. 또한 사용자 인증 및 권한 부여와 같은 로직은 서버 측에서 처리해야 한다.
  • SEO가 어렵다 : 단일 페이지만 렌더링되므로 페이지 수와 콘텐츠 생성을 기반으로 보상을 제공하는 검색 엔진에 최적화하기 어렵다. 
  • 초기 구동 속도 : 필요한 리소스를  최초 로딩 시 모두 다운로드하므로 로딩 시간이 길어질 수 있다. 초기 로딩 시간이 길 경우 사용자 경험에 부정적인 영향이 갈 수 있다.

 

MPA 장단점

• 장점
  • SEO에 좋다 : 각 페이지에 고유한 URL이 있고 별도로 색인이 생성될 수 있으므로 검색 엔진 결과에서 순위가 높다. 이는 MPA의 각 페이지가 검색 결과에서 독립적으로 순위를 매길 수 있으며 잠재적으로 사이트에 더 많은 트래픽을 유도할 수 있음을 의미한다.
  • 안전하다 : MPA는 각 페이지에 대해 별도의 요청을 보내기 때문에 인증 및 권한 부여와 같은 보안 조치를 구현하는 것이 더 쉽다.
  • 초기 로드 시간이 빨라졌다 : 브라우저가 모든 콘텐츠가 아닌 현재 페이지의 콘텐츠만 로드하면 되기 때문에 MPA의 초기 로드 시간이 더 빠를 수 있다.
  • 이전 브라우저와 호환 가능하다 : MPA는 전통적인 방법이므로 대부분의 오래된 브라우저 및 레거시 시스템과 호환된다. 호환성은 사용자가 다양한 장치나 플랫폼에서 애플리케이션에 액세스하는 상황에서 중요하다.
• 단점
  • 서버 부하가 높아진다 : 각 페이지를 로드하려면 별도의 요청이 필요하므로 MPA에서는 서버가 더 많은 요청을 처리해야 한다. 
  • 개발 및 유지 관리가 복잡함 : SPA보다 크기가 크고 여러 페이지로 구성되어 있어 개발하는 데 많은 시간이 걸린다. 또한 MPA는 각 페이지를 별도로 설계하고 개발해야 하므로 SPA에 비해 더 복잡한 서버 측 로직이 필요해 유지 관리해야 할 코드가 늘어나고 버그와 오류가 발생할 위험이 커진다.

 

SSR과 CSR의 차이점은?

CSR(Client-Side Rendering)

CSR은 클라이언트 측(JavaScript)에서 콘텐츠를 렌더링하는 방식이다. 초기 페이지 로드 시 최소한의 HTML과 자바스크립트를 로드하고, 이후 필요한 데이터는 클라이언트에서 서버에 요청하여 받아와서 화면에 렌더링한다.

SPA는 주로 CSR 방식을 사용한다. 이는 SPA가 단일 페이지에서 동적으로 콘텐츠를 갱신해야 하기 때문이다. 하지만, SPA는 SSR(Server-Side Rendering) 방식으로도 구현될 수 있다. 예를 들어, Next.js 같은 프레임워크는 SPA이지만 SSR을 지원한다.

 

SSR(Server-Side Rendering)

초기 페이지 로드를 서버에서 렌더링하여 클라이언트에게 완성된 HTML을 제공한 다음, 클라이언트 측에서 추가적인 상호작용을 처리한다. SPA에서 SSR을 활용하면 초기 로딩 속도가 빨라지고, SEO(검색엔진최적화)에 유리하다. SEO에 유리한 이유는 웹 페이지가 서버에서 미리 렌더링 되어서 사용자에게 전달되므로 크롤러가 페이지를 쉽게 인식하고 인덱싱할 수 있기 때문이다. 검색 엔진에서 웹 사이트를 더 자주 더 상위에 표시할 수 있다.

SSR은 대신 모든 사용자의 모든 페이지에 대한 렌더링을 맡아야하기 때문에 서버에 더 큰 부하가 발생하고, 결국 페이지 로딩 속도를 늦출 수 있다. 또한 사용자의 모든 요청마다 새로 렌더링을 해야하기 때문에 페이지를 이동할 때마다 화면이 깜빡이며 화면 깜빡임은 사용자 경험에 부정적 영향을 미칠 수 있다. SSR 한계를 극복하기 위해 Pre-rendering 이나 Dynamic Rendering 같은 대안 기술들이 있다.

 

결론적으로 꼭 SPA를 구성할 때 CSR로 구성되는 것은 아니며, SSR과 CSR의 차이점을 정리하자면 아래와 같을 것이다.

• 웹 페이지를 구성하는 방식에서 차이가 나타난다. CSR은 웹 페이지가 사용자의 브라우저 상에서 직접 완성되는 방식이다. 서버의 부담을 줄여주며 사용성을 향상시켜준다. 대신 초기 로딩 시간이 길어진다.
• SSR은 서버에서 웹 페이지를 미리 그려 사용자에게 전송한다. 사용자가 웹 페이지를 빠르게 볼수 있게 하는 장점이 있다. 그러나 SSR은 서버에 부담을 주어 트래픽이 많을 경우 서버 성능을 저하시킬 수 있다.

 

---

내 생각

결국 SPA는 단일 페이지(HTML, CSS, JavaScript)를 받아와 브라우저의 캐싱을 이용해 성능을 개선하고 비동기 통신으로 변경된 부분만을 불러와 현재 화면에 렌더링하는 기술이다. 사용자의 브라우저에서 렌더링을 진행해 서버의 부하를 줄이고 사용자 경험을 개선할 수 있는게 특성인 것 같다.

MPA는 SPA 처럼 단일 페이지를 받아오고 비동기 통신으로 변경된 부분만을 불러오는 것이 아니라 여러 개의 페이지를 요청할 때마다 서버로부터 받아오는 기술. SEO에 적합하다는 강점이 있음.

 

[참조] : 

https://developer.mozilla.org/ko/docs/Glossary/SPA

https://www.elancer.co.kr/blog/view?seq=214

https://www.bloomreach.com/en/blog/2018/what-is-a-single-page-application

https://jongminfire.dev/spa-single-page-application-%EB%9E%80

https://business.adobe.com/blog/basics/learn-the-benefits-of-single-page-apps-spa

https://www.next-t.co.kr/seo/seo%ED%8A%B8%EB%A0%8C%EB%93%9C/ssr-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%98-%EC%9B%90%EB%A6%AC%EC%99%80-seo%EC%97%90-%EB%AF%B8%EC%B9%98%EB%8A%94-%EC%98%81%ED%96%A5/#:~:text=%EC%84%9C%EB%B2%84%20%EC%82%AC%EC%9D%B4%EB%93%9C%20%EB%A0%8C%EB%8D%94%EB%A7%81(SSR)%EC%9D%80%20SEO%20%EC%B5%9C%EC%A0%81%ED%99%94%EB%A5%BC%20%EC%B6%94%EA%B5%AC%ED%95%98%EB%8A%94%EB%8D%B0,%EB%86%92%EC%9D%B4%EB%8A%94%20%EB%8D%B0%20%EA%B8%B0%EC%97%AC%ED%95%98%EA%B2%8C%20%EB%90%A9%EB%8B%88%EB%8B%A4.

https://ventionteams.com/blog/pros-cons-of-single-page-applications

https://it-techtree.tistory.com/entry/Web-Advantage-And-Disadvantage-SPA-MPA