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

서버사이드 렌더링 (SSR)은 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 구동 방식이다.
출처 : d2.naver.com/helloworld/780418

기업에서 SSR을 선택하는 이유가 뭘까?

✅  서버사이드 렌더링 방식을 채택한 월마트는, SEO최적화와 좋은 퍼포먼스를 위해 채택했다고한다.

그리고 Node.js와 React로 기술 스택을 변경했다.

아래는 블로그 글을 읽고 번역한 내용이다. 일부 부정확한 표현이나 틀린표현이 있을 수 있다.

지적해주시면 감사합니다.

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

클라이언트사이드렌더링의 구동방식(출처: 하단표기)

서버 -> 브라우저(클라이언트)로 응답을 보낸다. 

브라우저는 JS를 다운로드받고, 리액트를 실행시킨다. 

페이지가 보이고, 상호작용하게된다.

서버사이들덴더링의 작동방식(출처: 하단표기)

서버가 렌더된 HTML 응답을, 브라우저에게 보낸다.

브라우저는 페이지를 렌더한다. 페이지가 보이고, JS를 다운로드받는다.

브라우저는 리액트를 작동시킨다.

상호작용하는 페이지가 된다.

 

SSR과 CSR의 차이점

SSR와 CSR의 차이점은, CSR은 서버로부터 빈 페이지를 응답받고, SSR은 자바스크립트가 렌더링된 페이지를 받는다는것이다.

그러나 둘 다 자바스크립트를 다운로드받아야한다.

하지만 SSR의 사용자는 이미 페이지를 보고있고, 그 사이에 자바스크립트가 다운로드된다.

화면깜박임 또한 발생하지않는다.

몇가지 확인사항

✅  페이지가 빨리 렌더링 될 수록 사용자는 페이지를 빨리 볼 수 있지만, 리액트가 작동할 때 까지는 상호작용할 수 없다.

만약 사용자가 빠르게 클릭한다면, 아무런 동작도 일어나지 않을것이다.

✅  SSR의 TTFB(Time To First Byte)는 CSR보다 느리다.

왜냐하면 서버가 HTML을 작성해서 응답하기 때문에.

✅  서버의 처리량에 있어서, SSR이 CSR보다 적다.

react가 처리량에 영향을 매우 많이 끼치는데, React가 렌더되는동안 다른 요청은 할 수 없기 때문이다.

 

 

 

 

 

이미지 및 내용 출처:

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

The Benefits of Server Side Rendering Over Client Side Rendering