개발을 진행하면서 서버 사이드 렌더링에 대한 이해가 필요해 정리해보았다.
먼저 렌더링에 대한 간단한 이해를 시작으로 정리해보려고 한다.
렌더링이란 서버로부터 받은 파일을 클라이언트인 브라우저에게 보내는 과정이다.
간단하게 말해 서버에서 HTML 파일과 CSS 파일을 클라이언트에서 받아 파싱하게 되고 렌더링 과정을 통해 브라우저에 화면을 보여주게 된다.
그럼 이러한 렌더링 과정을 서버 측면에서 해줄 것이냐, 클라이언트 측면에서 해줄 것인가에 대한 부분에 있어
서버 사이드 렌더링과 클라이언트 사이드 렌더링 방식으로 사용되고 있다.
나는 이번에 서버 사이드 렌더링 방식 관점에서 정리해보려고 한다.
서버 사이드 렌더링 (Server Side Rendering) 이란
서버 사이드 렌더링이란 서버에서 페이지를 만들어 클라이언트인 브라우저로 보낸 후 화면에 표시하는 기법을 의미한다.
따라서, 서버 사이드 렌더링을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트인 브라우저에서 바로 보여줄 수 있다.
SSR 은 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client Side Rendering) 보다 페이지를 구성하는 속도는 늦어질 수 있지만 전체적으로 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빨라진다는 장점을 가지고 있다.
또한 SEO(Search Engine Optimization) 또한 쉽게 구성할 수 있다고 한다.
반면에 CSR 은 SSR 보다 초기 전송되는 페이지와 속도면에서 빠른 속도를 가지고 있지만 필요한 데이터를 클라이언트인 브라우저에서 추가로 요청해서 재구성해야 하기 때문에 전체적인 페이지 완료 시점은 SSR 보다 느려지게 된다.
SSR 과 CSR 의 차이점
먼저 SSR 의 렌더링 과정에 대한 사진을 가져왔다.
그리고 CSR 의 렌더링 과정에 대한 사진이다.
사진의 과정들만 봐도 SSR 과 CSR 의 렌더링 방식에 대한 차이를 찾을 수 있다.
SSR 과 CSR 의 주요 차이점은 다음과 같았다.
SSR 의 경우 브라우저에서 서버로부터 이미 렌더링이 준비된 HTML 페이지를 응답으로 받는다는 것이고
CSR 의 경우 브라우저는 서버로부터 렌더링이 되기 이전의 HTML 페이지를 응답으로 받는다는 것이다.
만약에 첫 페이지를 로딩하게 된다면 어떤 방식이 더 빠를까?
SSR 의 경우에는 이미 만들어진 페이지를 가져와서 보여주게 되고
CSR 은 클라이언트에서 빈 화면을 가져온 후에 다시 요청해서 페이지를 보여주기 때문에
SSR 의 속도가 더 빠르다.
그럼 첫 페이지 이후의 다른 페이지로 이동하게 된다면 어떨까?
SSR 은 첫 페이지와 동일하게 서버 측면에서 페이지를 다시 서버에게 요청해서 렌더링 과정을 거쳐 페이지를 가져와 보여줘야 한다.
CSR 은 기본적인 페이지에 대한 구성을 받아온 상태고 이후에 필요한 부분을 가져와 클라이언트에서 렌더링 과정을 거쳐 보여주게 된다.
따라서 SSR 은 첫 페이지와 동일한 과정을 다시 거쳐야 하기 때문에 더 느리다고 볼 수있다.
그럼 크롤러를 통해 웹 브라우저를 크롤링한다고 가정했을 때 어떻게 될까?
SSR 방식으로 구성된 페이지의 경우에는 서버에서 이미 렌더링된 페이지를 보여주기 때문에 크롤링하기 쉽지 않다.
하지만 CSR 방식의 경우 웹 브라우저에서 데이터를 가져와 렌더링 과정을 거치기 때문에 데이터를 가져와 보여주는 과정을 확인할 수 있기 때문에 CSR 방식으로 구성된 페이지의 경우 크롤링하기 더 용이하다고 볼 수 있다.
SSR 방식이 서버에서 렌더링을 진행하기 대문에 CSR 보다 서버의 리소스를 더 많이 사용하는 것은 당연하다고 생각한다.
그리고 리액트에서 renderToString() 으로 SSR 방식으로 구현할 때 서버가 멈춘다고 한다.
SSR 과 CSR 의 사용 여부
그럼 언제 SSR 을 사용하고 언제 CSR 을 사용해야 할까?
SSR 방식은 다음과 같은 경우에 사용한다고 한다.
- 네트워크가 느릴 경우
CSR 은 클라이언트로 한번에 모든 것을 가져와서 렌더링을 진행하지만
SSR 은 각 페이지마다 렌더링 후에 보여주기 때문이다. - SEO 최적화가 필요할 때
- 최초 로딩이 빨라야 하는 사이트의 경우
- 메인 스크립트가 크고 로딩이 매우 느릴 경우
- 웹 사이트가 상호작용이 없는 경우
CSR 방식은 다음과 같은 경우에 사용된다고 한다.
- 네트워크가 빠른 경우
- 서버의 성능이 좋지 않은 경우
- 사용자에게 보여줘야 하는 데이터의 양이 많은 경우
로딩 창을 보여줄 수 있는 장점이 있다고 한다. - 메인 스크립트의 크기가 작은 경우
- SEO 가 필요하지 않은 경우
- 사용자와 상호작용이 필요한 경우
SSR 방식과 더불어 CSR 방식에 대해서 찾아보고 정리를 해보았는데
나중에 직접적으로 경험해보면서 이해한 내용을 바탕으로 조금 더 보완해서 정리해봐야 할 것 같다.
- 참고 사이트
https://d2.naver.com/helloworld/7804182
The Benefits of Server Side Rendering Over Client Side Rendering
Most of our pages on walmart.com are using server side rendering (henceforth SSR) with only a few unique exceptions.
medium.com
[ 기술 스터디 ] SSR과 CSR의 차이
자강두천
velog.io