MPA, SPA
먼저, MPA와 SPA에 대해 간단하게 알아보면 SSR과 CSR에 대해 더욱 이해하기 좋을 것 같습니다.
MPA(Multi Page Application)
탭을 이동할 때마다 서버로부터 데이터를 받아와서 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다. 일반적으로 MPA에서는 렌더링 방식으로 SSR을 채용합니다.
MPA는 매번 새로운 HTML을 서버로부터 받아와야하고 전환 시 화면이 깜빡거리는 단점이 있기 때문에 AJAX가 등장하면서부터는 원하는 부분만 클라이언트에서 동적으로 받아올 수 있는 SPA를 사용하게 되었습니다.
SPA(Single Page Application)
하나의 페이지로 구성된 웹 어플리케이션 입니다. 웹 애플리케이션을 필요한 정적 리소스를 초반 한 번에 모두 다운로드하고 그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 갱신합니다. 일반적으로 SPA에서는 렌더링 방식으로 CSR을 채용합니다.
SSR (Server-side Rendering)
요청할때 즉시 데이터를 만들기 때문에 데잍터가 달라져서 미리 만들어두기 어려운 페이지에 적합합니다.
장점
- 초기 구동 속도가 빠릅니다.
- SEO에 유리합니다.
단점
- 화면 깜빡임이 있습니다.
- TTV와 TTI 사이 간극이 있어 사용자 경험이 나쁩니다.
- 매 페이지 로딩시 마다 서버에 요청하게 되어 서버 부하가 있습니다.
CSR(Client Side Rendering)
클라이언트 측에서 렌더링을 하는 방식입니다. Javascript를 동적 렌더링하게 됩니다.
장점
- 화면 깜빡임이 없습니다.
- 초기 로딩 이후 구동 속도가 빠릅니다.
- TTV와 TTI 사이 간극이 없어 전체적으로 매끄러운 사용자 경험을 할 수 있습니다.
- 서버 부하 분산됩니다.
단점
- 초기 로딩 속도가 느립니다.
- SEO(검색엔진 최적화)에 불리합니다.
SSG(Static Site Generation)
서버에서 HTML을 보내준다는 측면에서는 SSR과 비슷하지만, 언제 만들어 주느냐에 차이가 있습니다. 요청시에 해당 페이지를 응답하는 방법으로 바뀔 일이 거의 없어서 캐싱 해두면 좋은 페이지에 사용하면 적합합니다.
CSR + SSR/SSG
CSR의 단점을 보완하기위해 CSR앱에 SSR/SSG를 도입하기 위해 별도의 서버를 직접 운영하거나, 프레임워크(Next.js, Gatsby, Nuxt.js, ... )를 사용할 수 있습니다.
CSR에 SSR이나 SSG의 도입을 편하게 할 수 있으나 프레임워크를 사용하더라도 코드 복잡도가 올라가게 됩니다. 또 프레임워크를 사용하면 프레임워크를 사용하게되어 직접 제어할 수 없는 블랙박스 영역도 존재하게 됩니다.
어떤 서비스 환경을 구성하는냐에 따라서 CSR과 SSR을 적적히 활용하면 될 것 같습니다!
