서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)

서버 사이드 렌더링, 클라이언트 사이드 렌더링은 각각 서버와 클라이언트가 무언가를 렌더링한다는 뜻으로 유추된다.

무엇을 렌더링할까? 바로 웹 페이지다.

 

네이버 기술 블로그에서 설명하는 SSR은 아래와 같다.

https://d2.naver.com/helloworld/7804182

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식이다. JSP/Servlet의 아키텍처에서 이 방식을 사용했다. SSR을 쓰면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해 페이지를 구성하기 때문에 클라이언트 사이드 렌더링(CSR)보다 페이지 구성 속도는 느리지만 전체적으로 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 또한 SEO도 쉽게 구성할 수 있다.

 

한 마디로 서버에서 다 완성하고 클라이언트에게 보낸다는 뜻이다.

그럼 클라이언트 사이드 렌더링은 클라이언트에서 페이지를 구성해 보여주는 방식일 것이다.

그런데 왜 이렇게 두 가지 사이드로 나눠서 렌더링하는 건가? 각 방식만의 특징이 있어서 이렇게 나눠져 있는 건가 생각하면서 찾아봤다.

 

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

The Benefits of Server Side Rendering Over Client Side Rendering

주된 차이점은 SSR의 경우 브라우저에 대한 서버 응답은 렌더링 준비가 된 HTML 페이지인 반면, CSR의 경우 브라우저는 자바스크립트에 대한 링크가 있는 빈 문서를 제공한다는 것이다. 이는 브라우저가 모든 자바스크립트가 다운로드되고 실행될 때까지 기다릴 필요 없이 서버에서 HTML 렌더링을 시작한다는 걸 의미한다.
두 경우 모두 React를 다운로드하고 가상 돔을 구축하고 페이지를 대화형 상태로 만들기 위해 이벤트를 연결하는 동일한 프로세스를 거쳐야 하지만 SSR의 경우 사용자는 이 모든 작업이 진행되는 동안 페이지 보기를 시작할 수 있다. CSR에선 위의 모든 작업이 수행되기를 기다린 다음 페이지를 볼 수 있도록 가상 돔을 브라우저 돔으로 이동시켜야 한다.
CSR에서 발생하는 빈 페이지 깜박임 현상은 SSR에선 발생하지 않는다. 대부분의 사용자는 모든 로드 작업이 끝나면 제거되는 서버 응답에 로드 이미지를 전송해 CSR을 피한다.
SSR은 CSR보다 느리다. 서버가 빈 응답을 보내는 대신 HTML 생성에 시간을 써야 하기 때문이다. 서버의 SSR 처리량은 CSR 처리량보다 훨씬 적다. 반응형의 경우 처리량 영향이 매우 크다. 

 

https://www.growth-rocket.com/blog/a-closer-look-at-client-side-server-side-rendering/

SSR vs CSR: Which Method Works Best? - Growth Rocket

검색 엔진 발명 이후 HTML을 화면에 설정하는 일반적인 방법은 SSR이었다. 당시에는 SSR이 정적 이미지, 텍스트만 표시하는 웹 페이지를 제공하는 유일한 방법이었다. 그러나 시대가 바뀌며 웹 사이트는 메시지를 보내고 거래를 할 수 있기 때문에 훨씬 더 복잡해졌다. 현대 웹 대부분은 보다 동적이고 확장 가능한 웹 사이트를 만드는 방법을 제공하기 때문에 더 유연한 CSR로 구축된다. 특히 자바스크립트 프레임워크의 출현으로 브라우저에서 바로 동적 컨텐츠를 렌더링할 수 있게 됐다. 그 결과 원활한 사용자 경험으로 변환되는 웹 페이지 로딩 속도가 빨라진다. 수 년에 걸쳐 SSR이 CSR을 통해 웹 페이지를 렌더링하는 데 앞장서는 건 놀랄 일이 아니다.
그리고 이는 어떤 접근 방식이 가장 효과적인지에 대한 질문을 제기한다. 이것의 답변은 웹 사이트에서 뭘 할 계획인지에 따라 달라진다.
가끔 자바스크립트는 대부분의 SEO에 익숙한 방식과 다른 접근법을 제공하기 때문에 평판이 나쁘다. 어떤 경우엔 더 나은 솔루션이 필요한 상황에 자바스크립트를 과하게 쓰게 된다. 구글의 검색 엔진 크롤러 봇은 방대한 컨텐츠 웹을 통해 작동해야 하기 때문에 완전한 웹 브라우저로 작동하지 않는다. 이는 봇 중 일부가 자바스크립트를 실행하지 않거나 CSR을 지원하지 않는다는 걸 의미한다. 그래서 SSR은 검색 엔진 못이 HTML 컨텐츠를 제대로 크롤링할 수 있도록 하는 최고의 컨텐츠 렌더링 방법으로 인식됐다.

SSR의 작동 방식 : 웹 사이트를 방문하면 브라우저가 서버에 요청한다. 이 요청이 처리되면 브라우저가 컨텐츠를 해석하고 페이지를 표시한다. DB에서 데이터를 가져오고 HTML 페이지를 만들어 브라우저로 다시 보내는 전체 프로세스는 단 몇 밀리초만에 이뤄진다. 다른 웹 페이지를 방문하면 이 프로세스가 반복된다. 그러나 이렇게 하면 서버 부하가 증가하고 불필요한 인터넷 대역폭이 소모될 수 있다.

CSR의 접근 방식 : 개발자가 자바스크립트를 써서 브라우저에서 완전히 렌더링된 웹 사이트를 만들 수 있다. 이는 경로별 다른 HTML 페이지를 갖는 대신, CSR 사이트가 브라우저에서 동적으로 각 경로를 생성함을 의미한다. CSR의 초기 페이지 로드는 약간 느리지만 후속 페이지의 로드 시간이 빠르다. SSR과 달리 서버와의 통신은 런타임 데이터를 얻을 때만 발생한다. 게다가 CSR은 서버 호출 시마다 전체 UI를 다시 불러올 필요가 없다. 슈퍼에 차를 몰고 갈 때 CSR을 사용하면 1주일 간 필요한 모든 음식을 사기 위해 한 번만 방문해도 된다. 그러면 배고플 때마다 냉장고를 열기만 하면 된다.

 

그럼 SSR, CSR은 언제 사용하면 좋을까? 같은 링크에서 이 주제로 말하고 있다.

1. 동적 컨텐츠 로딩 : 서버는 높은 컴퓨팅 성능, 더 빠른 네트워킹 속도를 가진 시스템에 위치한다. 그래서 서버는 대규모 요청 처리에 필요한 추가 작업을 기대할 수 있다. 따라서 서버 측에서 컨텐츠를 가져오는 게 훨씬 빠르다. 그러나 클라이언트 측 시스템은 제한된 컴퓨팅 성능을 제공한다. 이는 컨텐츠 렌더링을 완료하는 데 더 많은 시간이 필요함을 의미한다. 때문에 사이트에 동적 컨텐츠 렌더링이 반복되는 경우 SSR이 더 나은 선택이다.

2. 웹 앱 UX & 사이트 UX : 웹 앱과 웹 사이트는 각각 다른 형식의 웹 컨텐츠다. 웹 앱은 사용자가 데이터 입력 및 보고서 생성 같은 작업을 수행해야 하므로 더 많은 상호 작용이 필요하다. 반면 웹 사이트는 단순히 비즈니스에 대한 정보를 제공하는 페이지다. 이를 염두에 두고 CSR은 각 클릭이 너무 오래 걸리지 않도록 하는 데 도움이 될 수 있어 웹 앱에 가장 적합하다. 그러나 웹 사이트와 관련해 SSR은 검색 엔진 봇에 대한 올바른 메타데이터를 보장하기 때문에 CSR보다 훨씬 좋다. 또한 캐싱 메커니즘은 사용자가 한 페이지에서 다른 페이지로 이동 시 렌더링 속도를 높이는 데 도움이 될 수 있다.

 

정리하면 SSR은 초기 페이지 로드 속도가 빠르고 CSR은 웹 앱에서 사용 시 SEO 성능이 좋다는 걸 알 수 있다.

이 둘의 장점을 합친 GatsbyJS나 Next.js 등 하이브리드 접근 방식이 존재하지만, 이 방법들을 쓰지 않더라도 내 상황에서 기능적이고 실용적인 방법을 고르는 게 더 중요하겠다.

아래는 위 사이트에서 제공하는 SSR, CSR을 설명하기 위해 첨부한 이미지들이다.

 

 

참고한 사이트)

 

https://velog.io/@zansol/%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81SSR-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81CSR

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

 

https://seizemymoment.tistory.com/132?category=889399 

[ReactJS] 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)이란

 

https://clearwater92.tistory.com/30

서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)