SSR과 CSR이란?

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

 

저번주에 Y언니가 SPA에 대해서 알려주는 시간이 있었다!

이와 관련된 조금 디테일한 이야기를 하면 좋을 것 같아서 SSR(Server-side Rendering, 서버 사이드 렌더링)과 CSR(Client-side Rendering, 클라이언트 사이드 렌더링)에 대해서 찾아볼까 싶었다.

 

이미 알고 있던 사실 :

언니가 알려주기 이전에 SPA에 대해서는 잘 몰랐지만 이번에 면접 준비를 하면서 최근 들어 서버 사이드 렌더링에서 클라이언트 사이드 렌더링이 조금 더 유행(?) 한다는 얘기를 들었다. 단어를 처음 들었을 때의 소감은 서버 사이드 렌더링은 말 그대로 서버에서 렌더를 하는 것일테니 마치 검색어를 입력하면 그에 대한 추천검색어를 서버에서 다시 클라이언트에 건네주는 것과 유사한 것일거라 생각했고, 클라이언트 사이드 렌더링은 말 그대로 클라이언트에서 결과를 도출하는 것일테니 그만큼 클라이언트, 웹 개발자가 점점 공부해야할 거리가 많아지고 있는게 아닐까 싶었다.

 

서론이 길었으니 본론으로!

 

SSR(Server-side Rendering)이란?

서버 사이드 렌더링.

기존에 자주 사용하던 방식의 렌더링이다. 클라이언트가 서버에 요청을 하면서 브라우저에 표시된 html을 넘기게 되면 서버는 그 요청에 대한 결과값을 도출하여 만들어진 새로운 html을 클라이언트에 넘겨준다. 여기서 매번 새로운 html을 서버에서 넘겨주다보니 반응 속도가 느리다. 많은 정보가 있는 웹에서 인터렉션 시마다 페이지가 전체적으로 새로 렌더링되는 것이다. (요청 시 새로고침이 일어난다) 이를 개선하기 위해 일부 html이나 스크립트만 넘기고 수정하는 방식을 사용했다고 하지만 여전히 클라이언트 요청 > html 리소스 전달 > 서버 결과값 계산 > html 리소스 전달 > 클라이언트 표시의 과정을 거치는 방식이다.

 

CSR(Client-side Rendering)이란?

클라이언트 사이드 렌더링.

언니가 알려준 전통적인 방식에서의 SPA는 클라이언트 사이드 렌더링 방식이다.

(SPA에 관한 글은 다음에 한 번 써봐야겠당 => 이후 작성한 글 2020/08/02 - [Interview] - SPA란?)

유저가 인터렉션한 화면 영역만 변화가 필요한 경우에, 그 영역만 정보를 읽어들이고 서버에 전달한다. 그리고 받은 json 과 같은 리소스로 view 영역은 클라이언트가 처리하는 방식이다. 

 

SSR과 CSR의 렌더링 과정

 

출처 : What shifting to server-side rendering looks like!

서버 사이드 렌더링

유저 요청 > 서버 html 파일 전송 (view가 유저에게 표시됨, 하지만 인터렉션 불가능) > 브라우저가 js를 다운로드 (인터렉션 불가) > 브라우저가 프레임워크 실행 (인터렉션 가능)

 

클라이언트 사이드 렌더링

유저 요청 > HTML 파일과 연관된 js를 서버에서 보내줌 > 브라우저가 HTML 파일과 js를 받음 > 브라우저가 프레임 워크 실행 (view 표시 및 인터렉션 가능)

 

둘의 큰 차이점이 있다면,

서버 사이드 렌더링은 유저에게 초기 진입 시 속도가 빠르게 느껴진다. (view를 모두 렌더한 채로 전달되기 때문에)

그러나 js를 다운로드-적용하는 시간때문에 인터렉션이 되기까지 로딩이 있다.

클라이언트 사이드 렌더링은 클라이언트 쪽에서 view를 그리기 때문에 상대적으로 느리게 느껴질 수 있다.

하지만 view가 보여진 후 이미지를 클릭하거나 인터렉션을 하게 되면 즉각적으로 클라이언트에서 view를 새로 제공함으로써 인터렉션 속도는 빠르게 보여진다.

 

클라이언트 사이드 렌더링에서 문제점으로 보여지는 SEO(Search Engine Optimization, 검색 엔진 최적화)와 보안 문제가 발생한다고 하는데.. 이 부분은 SPA를 다룰 때 조금 더 자세히 알아봐야겠다.

 

참고 자료

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

https://velog.io/@zansol/확인하기-서버사이드렌더링SSR-클라이언트사이드렌더링CSR

https://asfirstalways.tistory.com/244

https://www.slipp.net/questions/368