2021-09-23 SPA vs MPA, CSR vs SSR

1. MPA (Multiple Page Application)

- 여러 페이지로 구성된 Application이다.

- SSR(Server Side Rendering) 방식으로 렌더링한다 : 페이지 이동하거나 새로고침할 때마다 서버로부터 정적 리소스(HTML, CSS, Javascript)가 다운된 후에 전체 페이지가 렌더링된다.

 

• 장점

(1) SEO 관점에서 유리하다

(2) 첫 로딩시간이 짧다 : 초기 요청 때 상대적으로 적은 리소스를 요청하기 때문에 렌더링이 빠르다.

 

• 단점

(1) 새로운 페이지로 이동하면 리로드가 발생하여 새로운 페이지 요청과 렌더링이 이루어진다. (화면이 깜빡이는데 이는 UX의 관점에서 단점에 해당한다.)

(2) 페이지 이동할 때 중복된 템플릿도 로딩이 필요하다.

(3) 서버 렌더링에 따른 부하가 발생한다.

(4) 프론트엔드와 백엔드가 밀접하게 연관되어 있기 때문에 개발이 복잡해질 수 있다.

 

 

 

2. SPA (Single Page Application)

- 하나의 페이지로 이루어진 Application이다.

- 일반적으로 CSR(Client Side Rendering) 방식으로 렌더링한다 : 최초 요청 시에 HTML, CSS, Javascript 등 각종 리소스를 한 번에 받아온다. 이후에는 서버에 데이터만 요청하고 자바스크립트를 통해 뷰를 컨트롤한다.

- Angular, React, Vue 등 프론트엔드 기술들의 등장으로 유행하기 시작했다.

 

• 장점

- 더 나은 UX를 제공한다 : MPA 특유의 깜빡거림 없이 더 빠른 속도로 페이지 전환이 이루어진다.

- 필요한 리소스만 부분적으로 로딩한다. (성능)

- 서버의 템플릿 연산을 클라이언트로 분산시킬 수 있다. (성능)

- 컴포넌트별 개발이 용이하다. (생산성)

- 모바일 앱을 개발하더라도 동일한 API를 사용하도록 설계할 수 있다. (생산성)

 

 

• 단점

- SEO가 어렵다. (SSR로 극복가능)

- 초기 구동 속도가 느리다.

- 보안 이슈 : SSR에서는 사용자의 정보를 서버측에서 세션으로 관리하지만 CSR에서는 클라이언트 측의 쿠키를 통해서만 관리가 가능하다.

 

 

3. SSR 방식의 SPA

- 일반적으로 SPA는 CSR 방식으로 렌더링되지만 SEO를 위해 SSR 방식을 채택하기도 한다.

- 이 경우 처음에는 SSR 방식으로 렌더링되며 이후 페이지들에서는 CSR 방식을 이용한다 (SSR with Hydration)

- React의 Next.js, Vue의 Nuxt.js가 대표적인 프레임워크 예시이다.