[렌더링 아키텍처] SPA, MPA/SSR의 차이점

클라이언트가 렌더링을 담당하는 구조: CSR

SPA는 Single Page Application로, 말 그대로 '한 개의 페이지로 구성된 웹 애플리케이션'이다.

CSR(Clinet-Side Rendering)은 SPA 구조 안에서 사용하는 렌더링 방식으로, 클라이언트가 JS를 통해 직접 랜더링한다.

SPA는 대부분 JavaScript기반 라우팅을 사용하며, 대표적인 프레임워크로는 React, Vue, Angular이 있다.

 

특징으로는,

1. 초기 한 번의 로딩으로 전체 HTML을 불러온다.

이후 새로고침이 필요 없으며 필요한 데이터만 불러와서 화면을 바꾸고, 페이지 간 이동 시에 전체 페이지를 다시 요청하지 않는다.

이는 빠르고 부드러운 화면 전환이 가능하여 UX를 높일 수 있다.

다만, 초기에 모든 리소스를 불러오기 때문에 처음 로딩이 오래걸릴 수 있다.

이에 대한 해결 방안으로는, 코드 분할(Code Splitting)과 Lazy Loading이 있다.
 'Lazy Loading': 필요한 페이지 컴포넌트만 JS모듈을 불러오는 방식.

 

2. 클라이언트 사이드 렌더링(CSR) 기반의 라우팅 구조
SPA는 보통 CSR(Client-Side Rendering) 방식으로 동작한다.
이는 서버에서 기본적인 HTML 뼈대만 전달하고, 브라우저가 JavaScript를 실행하여 콘텐츠를 렌더링하는 방식이다.

예로, React에서는 react-router-dom 같은 라이브러리를 통해 라우팅을 처리한다.

<Route path="/info" element={<Info />} />

 

3. API 기반의 데이터 처리 구조

백엔드와의 통신에 있어 대부분 REST API, GrapQL을 사용한다. 필요한 데이터만 요청하여 이를 렌더링하는 구조로, 프론트엔드와 백엔드가 분리된 아키텍처(MSA)에서 잘 어울린다.

 

---

 

반대로 서버가 렌더링을 담당하는 구조: MPA, SSR

 

MPA(Multi Page Application)은 서버 기반 라우팅 구조로,

페이지를 이동할 때마다 전체 페이지를 새로고침한 뒤, 서버가 새로운 HTML을 렌더링하여 응답하는 방식이다.

따라서 페이지 전환 시 화면이 깜빡이거나 로딩이 발생하며, 클라이언트 상태도 매번 초기화된다.

장점으로는, 모든 요청이 서버로 가므로 SEO에 유리하고 보안성도 높다.

* SEO(Search Engine Optimizaion): 검색 엔진 최적화로, 검색 엔진에서 본인의 웹사이트가 잘 노출되도록 만드는 기술 및 전략.

 

SPA가 SEO가 어려운 이유는, 

SPA는 초기 로딩 시 거의 빈 HTML만 전달하고, JS가 실행된 후에 내용이 동적으로 채워지는 방식이다.

이 때문에 일부 검색 엔진이 JS를 제대로 실행을 못하면, 인식하지 못해 SEO에 불리할 수 있다.

> SEO문제를 보완할 방법으로는, SSR(Server side Rendering), Pre-rendering이 있다.

 

MPA는 보안 측면에서 여러 이점이 있어 현재 은행이나 공공기관에서 많이 쓰인다.

모든 요청을 서버가 담당하여 민감한 데이터를 브라우저에 오래 머무르게 하지 않아 상대적으로 안전하며, 세션 기반 인증을 서버에서 관리함으로써 토큰 탈취와 같은 위험도 줄어든다. 또한 JS 의존도가 낮아 공격 포인트가 적고, 서버에서 사용자 행동에 대한 기록이나 감사 로그를 남기기도 용이하기에 URL 단위로 추적이 자연스럽게 가능하다는 특징이 있다.

 

SSR(Server-Side Rendering)은 SPA 구조를 기반으로 하지만, HTML을 서버에서 렌더링한 후 클라이언트에 전달하는 방식이다.

이는 SPA처럼 보이기에 페이지 이동 시 빠르고 부드러운 화면 전환이 가능하며, 상태 또한 클라이언트에서 유지된다.

MPA와 마찬가지로 초기 HTML이 서버에서 생성되므로 SEO에 유리하다.