[JavaScript] SPA/MPA & SSR/CSR

• SPA (Single Page Application) : 1개의 페이지로 구성된 Application
• MPA(Multiple Page Application) : 여러개의 페이지로 구성된 Application

• SSR(Server Side Application) : 서버가 랜더링을 담당
• CSR(Client Side Rendering) : 클라이언트가 렌더링을 담당

 

MPA는 SSR 방식을 사용하고 SPA는 CSR 방식을 사용

 

MPA(Multiple Page Application)는 각 페이지별로 HTML문서가 따로 존재하여, 페이지를 이동할 때마다 새로운 html 페이지를 서버로 부터 새로 받아와서 매번 새로 렌더링하는 전통적인 웹페이지 구성 방식입니다. 

 

SPA(Single Page Application)는 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드하고, 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만 따로 전달받아 페이지를 갱신을 합니다. 기존 페이지의 내부를 수정해서 보여주는 방식이라고 이해하시면 됩니다.

 

SPA의 장단점

SPA는 사용자 경험 측면에서 큰 장점을 가지고 있습니다. 페이지를 새로 고침하지 않고도 콘텐츠를 업데이트할 수 있기 때문에, 애플리케이션의 반응성이 뛰어나고 사용자는 더욱 매끄러운 인터랙션을 경험할 수 있습니다.

왜냐하면 SPA는 클라이언트 사이드 렌더링을 사용하여 브라우저에서 직접 콘텐츠를 생성하고 업데이트하기 때문입니다. 이는 네트워크 지연을 최소화하고, 사용자에게 빠른 피드백을 제공할 수 있습니다.

그러나 SPA는 초기 로딩 시 모든 스크립트와 리소스를 한 번에 불러와야 하기 때문에, 초기 로딩 속도가 느릴 수 있습니다. 또한, SPA는 SEO(Search Engine Optimization, 검색엔진 최적화) 에 불리하며, JavaScript가 비활성화된 환경에서는 작동하지 않을 수 있습니다.

왜냐하면 SPA는 검색 엔진이 JavaScript를 실행하지 않고 HTML만을 분석하는 경우, 콘텐츠를 제대로 크롤링하지 못할 수 있기 때문입니다. 따라서 SPA를 사용할 때는 SEO(Search Engine Optimization, 검색엔진 최적화) 를 위한 추가적인 노력이 필요합니다.

또한, SPA는 복잡한 상태 관리와 메모리 누수 문제에 직면할 수 있으며, 이를 관리하기 위해 추가적인 개발 노력이 요구됩니다.

 

MPA의 장단점

MPA는 각 페이지마다 별도의 URL을 가지고 있어 SEO(Search Engine Optimization, 검색엔진 최적화) 에 유리하며, 사용자가 웹사이트의 특정 부분을 쉽게 공유할 수 있다는 장점이 있습니다. 이는 웹사이트의 가시성을 높이고, 사용자 유입을 증가시킬 수 있습니다.

왜냐하면 MPA는 각 페이지를 별도의 문서로 처리하기 때문에, 검색 엔진이 각 페이지의 콘텐츠를 쉽게 인덱싱할 수 있으며, 사용자는 웹사이트의 특정 페이지를 직접 링크로 공유할 수 있기 때문입니다.

그러나 MPA는 페이지 간 이동 시 전체 페이지를 새로 불러와야 하기 때문에, SPA에 비해 사용자 경험이 다소 떨어질 수 있습니다. 페이지 로딩 시간이 길어지고, 사용자는 페이지 간 이동 시 화면 깜빡임을 경험할 수 있습니다.

왜냐하면 MPA는 페이지 이동 시 서버로부터 새로운 페이지를 요청하고, 이를 브라우저에서 렌더링하는 과정을 거치기 때문입니다. 이는 네트워크 지연과 서버 부하를 증가시킬 수 있습니다.

또한, MPA는 각 페이지마다 별도의 HTML, CSS, JavaScript 파일을 관리해야 하기 때문에, 프로젝트의 복잡성이 증가하고 유지보수가 어려워질 수 있습니다.

 

참고자료

• https://velog.io/@rookieand/CSR-SSR-SPA-MPA-%EC%9D%B4%EA%B2%83%EB%93%A4%EC%9D%80-%EB%AD%98%EA%B9%8C#1-spa-single-page-application
• 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://f-lab.kr/insight/spa-vs-mpa-in-frontend-development
• https://codingpracticenote.tistory.com/78