SPA vs MPA | SSR vs CSR

 

SPA 와 MPA 는 웹 애플리케이션의 구조와 동작 방식에 구분되는 패턴이다.

어떻게 동작하고 어떻게 페이지를 랜더링하는 지가 중점이다.

 

 

 

MPA (Multi-Page Application) 정의: MPA는 다중 페이지 애플리케이션을 의미하며, 각 페이지마다 개별적인 HTML 파일이 로드되는 웹 애플리케이션입니다. 일반적으로 서버에서 각 페이지를 렌더링하고, 각 URL은 하나의 고유한 페이지를 표시합니다. 특징: 페이지 전환: 사용자가 다른 페이지로 이동할 때마다, 새로운 HTML 페이지를 서버에서 로드하게 됩니다. 서버 렌더링: 요청이 있을 때마다 서버에서 HTML을 렌더링하고, 이를 클라이언트에 전달합니다. 동적 페이지: 클라이언트가 필요한 데이터를 요청하면 서버가 이를 처리하여 새로운 페이지를 렌더링합니다. 장점: SEO 최적화: 각 페이지는 별도의 HTML 파일로 존재하므로, 검색 엔진 최적화(SEO)가 용이합니다. 간단한 구조: 각 페이지가 독립적이고, 서버에서 렌더링하기 때문에 복잡한 클라이언트 사이드 처리가 필요 없습니다. 단점: 느린 반응속도: 페이지 간 이동 시 매번 전체 페이지를 새로고침하므로, 사용자 경험이 떨어질 수 있습니다. 서버 부하: 각 페이지 요청마다 서버에서 HTML을 생성해야 하므로, 서버 부하가 클 수 있습니다.

SPA (Single Page Application) 정의: SPA는 단일 페이지 애플리케이션을 의미합니다. 사용자와의 상호작용이 발생할 때마다 페이지 전체를 새로고침하지 않고, 하나의 HTML 페이지로 웹 애플리케이션이 동작합니다. 이 방식은 주로 JavaScript, React, Angular, Vue.js와 같은 프레임워크를 활용하여 구현됩니다. 특징: 빠른 사용자 경험 (UX): 페이지가 새로고침되지 않기 때문에, 사용자가 이동하는 동안 빠르고 부드러운 경험을 제공합니다. 서버와의 최소한의 통신: 필요한 데이터만 서버에서 받아와서 클라이언트에서 동적으로 렌더링합니다. 이로 인해 서버 부하가 줄어듭니다. 초기 로딩: 첫 번째 페이지 로딩 시, 많은 자원 (HTML, CSS, JavaScript)을 한 번에 불러오기 때문에, 초기 로딩 시간이 길 수 있습니다. 브라우저 히스토리 관리: 여러 페이지처럼 보이지만 실제로는 URL을 조작하여 '가상 페이지'를 만듭니다. 브라우저의 뒤로 가기 버튼이나 URL을 활용한 네비게이션도 가능합니다. 장점: 빠른 인터페이스: 페이지 새로고침이 없으므로, 반응 속도가 빠르고 사용자 경험이 우수합니다. 네트워크 요청 최적화: 필요한 데이터만 서버에서 받아오므로, 데이터 전송량이 적고 효율적입니다. 단점: 초기 로딩이 길어질 수 있음: 첫 페이지 로딩 시 많은 리소스를 불러오기 때문에 초기 로딩 시간이 길어질 수 있습니다. SEO 문제: 자바스크립트로 페이지 내용을 렌더링하기 때문에, 검색 엔진 최적화(SEO)가 어려울 수 있습니다. 이를 해결하려면 서버 사이드 렌더링(SSR)을 사용해야 합니다.

 

---

 

SSA 와 CSR 은 웹이 "어디에서 렌더링 되는지" 가 중점이다

클라이언트에서 렌더링 되는지, 서버에서 렌더링 되는지의 차이이다.

SSA (Server Side Application) 정의: SSA는 서버 사이드 애플리케이션을 의미하며, 대부분의 로직이 서버에서 처리되고, 클라이언트는 단지 결과를 표시하는 역할을 합니다. 페이지 요청 시, 서버에서 모든 HTML을 생성하고 이를 클라이언트에게 전달합니다. 일반적으로 전통적인 MPA와 유사합니다. 특징: 서버 렌더링: 클라이언트는 서버에서 생성한 HTML을 받아와서 표시합니다. 서버에서 비즈니스 로직을 처리하고, 페이지를 렌더링합니다. 중앙 집중식 처리: 모든 데이터 처리와 로직이 서버에서 이루어지며, 클라이언트는 그 결과를 표시하는 역할을 합니다. 장점: 단순한 구조: 클라이언트에서 로직을 처리하지 않으므로, 클라이언트 측 코드가 단순해집니다. 보안: 모든 로직이 서버에서 처리되므로, 보안 측면에서 유리할 수 있습니다. 단점: 서버 부하: 서버에서 모든 요청을 처리해야 하므로, 서버의 부하가 클 수 있습니다. 느린 반응속도: 페이지를 새로고침해야 하므로, 사용자 경험이 떨어질 수 있습니다.

CSR (Client Side Rendering) 정의: CSR은 클라이언트 사이드 렌더링을 의미하며, 페이지가 클라이언트에서 JavaScript를 사용하여 렌더링되는 방식입니다. HTML과 JavaScript 코드가 서버에서 클라이언트로 전달되면, 클라이언트에서 JavaScript가 실행되어 페이지를 동적으로 렌더링합니다. React, Angular, Vue.js와 같은 프레임워크가 대표적입니다. 특징: 클라이언트에서 렌더링: 클라이언트에서 JavaScript가 페이지를 동적으로 렌더링합니다. 서버는 데이터만 제공하고, 실제 페이지 생성은 클라이언트에서 이루어집니다. 빠른 사용자 경험: 페이지가 새로고침되지 않으므로, 사용자는 빠른 반응속도를 경험합니다. 라우팅 처리: URL에 따라 페이지를 동적으로 렌더링하며, 브라우저 내비게이션이 가능합니다. 장점: 빠른 반응 속도: 페이지가 새로고침되지 않으므로 사용자 경험이 빠릅니다. 서버 부하 감소: 서버는 데이터만 제공하고, 실제 렌더링은 클라이언트에서 처리하므로 서버의 부하가 적습니다. 단점: 초기 로딩 시간: 클라이언트에서 JavaScript를 처리해야 하므로, 초기 로딩이 길어질 수 있습니다. SEO 문제: JavaScript로 렌더링되기 때문에, 검색 엔진 최적화(SEO)에서 불리할 수 있습니다. 이를 해결하려면 서버 사이드 렌더링(SSR)을 사용해야 합니다.

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/