웹 페이지를 방문할 때, 클라이언트는 서버에 HTTP 요청을 보내게 되고, 서버에서는 응답으로 데이터를 전송합니다. 브라우저에서는 이 HTML, CSS, JS 등의 데이터를 이용하여 DOM tree, CSSOM tree와 같은 여러 트리구조를 생성하고, 클라이언트의 Layout에 맞게 화면에 그려주는 렌더링 작업을 거쳐 최종적으로 클라이언트에게 화면을 보여주게 됩니다.
이러한 구조에서 서버에서 응답으로 보내주는 데이터를 어디에서 조립하느냐에 따라 구체적인 동작 방식이 달라지게 됩니다. SSR과 CSR에 대해 알아보기 전에, 먼저 Single Page Application (SPA)과 Multi Page Application (MPA)에 대해 알아보겠습니다.
SPA(Single Page Application)
SPA는 단일 페이지 어플리케이션으로, 하나의 웹 페이지 내에서 필요한 데이터를 받아 동적으로 화면을 구성하는 웹 애플리케이션입니다.
사용자와 웹 페이지가 상호작용을 통해 데이터를 불러오고자 할 때 페이지 전체를 다시 불러오는 것이 아닌, 필요한 데이터만 서버에서 요청받아 동적으로 화면을 구성하게 됩니다. 따라서, 연속되는 페이지에서 화면 깜빡임 없이 데이터를 갱신하기 때문에 사용자의 경험을 향상할 수 있습니다.
MPA(Multi Page Application)
반면, MPA에서는 새로운 데이터를 불러오고자 할 때, 새 HTML을 받아와서 페이지 전체를 새로 렌더링하는 고전적인 방식입니다.
데이터가 필요할 때마다 전체 페이지를 새로 렌더링하기 때문에 상호작용시, 화면 깜빡임이 자주 발생하는 방식입니다. Ajax가 등장하고 나서는 원하는 부분만 클라이언트에서 동적으로 변경할 수 있고 화면 깜빡임도 없는 SPA를 주로 사용하게 되었습니다.
Ajax란?
자바스크립트를 이용하여, 프론트엔드에서 백엔드로 비동기적(페이지 전환 없이)으로 데이터를 요청하여 주고받는 것
SSR과 CSR은 웹 페이지를 구성하는 이 두가지 방식과 밀접한 연관성이 있습니다.
일반적으로 단일 페이지 어플리케이션에서는 렌더링 방식으로 CSR을, 멀티페이지 애플리케이션에서는 SSR을 사용합니다. 하지만, SPA == CSR / MPA == SSR은 아닙니다.
SSR이란?
SSR이란 Server-side Rendering의 약자로, 요청 시 서버 측에서 필요한 HTML 데이터를 모두 채워서 클라이언트에게 보내주는 방식을 말합니다. 기존 JSP/Servlet 아키텍처, php에서 이 방식을 사용했습니다.
장점
SSR 방식은 요청 즉시 서버에서 페이지에 필요한 데이터를 얻어와, 렌더링 준비를 마친 HTML을 생성하고, 이를 브라우저에 전달합니다. 브라우저가 이러한 리소스를 서버로부터 전달받으면 페이지를 바로 클라이언트에게 보여줄 수 있습니다. 따라서 초기 로딩 속도는 CSR보다 빠릅니다. 또한, SEO(Search Engine Optimization) / 검색엔진 최적화에서도 유리합니다.
단점
하지만 이후 페이지 내 이동이 필요할때에도 서버에서 전체 데이터를 모두 채워서 보내주기 때문에 서버의 부하가 크고, 필요한 데이터만 받아 동적으로 화면을 구성하는 CSR보다 초기 로딩 이후의 속도는 느립니다. 또한 화면이 보여지는 시간보다 JS가 다운로드되고 실행되는 속도가 느리기 때문에, JS로직이 모두 연결될 때까지는 사용자가 웹 페이지와 상호작용을 할 수 없습니다.
추가적으로 사용자가 실제로 화면을 보는 시점과 TTV(Time To View) 사용자가 실제로 상호작용을 할 수 있는 시점 TTI(Time To Interact) 가 다릅니다. 이는 사용자에게 부정적 경험이 될 수 있습니다.
SEO란?
SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다.
검색 엔진은 웹을 크롤링 (en-US)하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다.
- 출처 : mdn 공식 문서
CSR이란?
CSR이란 Client-side Rendering의 약자로, 클라이언트(사용자)측에서 필요한 데이터를 추가로 요청하여 재구성하는 방식입니다. React, Vue, Angular 과 같은 클라이언트 템플릿 엔진에서 이 방식을 사용합니다. (Next.js나 Gatsby, Nuxt.js 과 같은 프레임워크를 통해 Rendering 방식을 바꿀수도 있습니다.)
장점
서버에 필요한 데이터만 요청하면 되기 때문에 이후 구동 속도가 빠르고 서버에 부하가 적습니다. 또한 페이지의 반응속도와 UX도 우수하다는 장점이 있습니다.(초기 로딩 제외) SSR의 단점이었던 TTV와 TTI가 CSR에서는 동일하다는 장점도 있습니다.
단점
하지만, 첫 화면 구성시 클라이언트 쪽에서 JS 파일을 이용하여 동적으로 페이지를 구성해야 하기 때문에 초기 로딩 속도가 느리다는 단점이 있습니다. 또한 CSR 방식에서는 서버에서 비어있는 HTML을 받기 때문에 SEO에 불리하다는 단점이 있습니다.
| CSR | SSR | |
| 장점 | - 화면 깜빡임이 없음 - 초기 로딩이후 속도가 빠름 - TTV와 TTI가 동일 - 서버 부하 분산 |
- 초기 구동 속도가 빠름 - SEO에 유리 |
| 단점 | - 초기 로딩 속도가 느림 - SEO에 불리 - 캐싱이 잘 안됨 |
- 화면 깜빡임 존재 - TTV와 TTI의 간극 존재 - 서버 부하 |
요즘에는 성능상의 이점이 크기 때문에 보통 CSR 방식을 사용합니다.
🎈 SSG
Static Site Generation 서버에서 미리 다 만들어둔 페이지를 요청 시, 클라이언트에 응답하는 방식. SSR 방식은 요청시, 서버에서 HTML 페이지를 만드는 것이기 때문에 이미 완성된 HTML을 전송하는 SSG와는 차이가 있다.
💡 Isomorphic App
서버와 클라이언트에서 동일한 코드로 동작하는 어플리케이션. 서버와 클라이언트에서 같은 코드로 동작하기 때문에 구현 난이도가 있지만 초기 로딩 속도와 SEO개선, CSR의 장점을 가져갈 수 있다.
- 참고
https://d2.naver.com/helloworld/7804182
https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
