[TIL] SSR(Server Side Rendering)에 대해 설명

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

매일메일 - 기술 면접 질문 구독 서비스

 

오늘의 질문은 SSR(Server Side Rendering)에 대해 설명하는 것이다.

SSR (Server Side Rendering)

SSR(Server Side Rendering) 방식은 초기 화면을 클라이언트가 아닌 서버에서 렌더링하여 완성된 HTML을 클라이언트에 내려주는 방식이다. SSR에서는 서버 단에서 HTML을 완성해 클라이언트에 전송하고, 클라이언트가 해당 HTML을 파싱만 하여 화면을 그리는 방식이다. 경우에 따라서는 이후 Hydration을 통해 이벤트 리스너 부착 등의 자바스크립트 작업을 수행하여 정적인 화면을 동적으로 전환한다.

 

반면, CSR(Client Side Rendering) 방식에서는 브라우저가 서버로부터 비어있는 뼈대 HTML을 받아온 후, 필요한 자바스크립트 번들을 다운로드하고 번들을 실행하여 동적으로 컨텐츠를 채운다.

SSR의 장점

SEO(검색 엔진 최적화) 측면에서 유리하다. 화면이 동적으로 그려지는 CSR에 비해서 검색 엔진이 크롤링할 때 더 쉽게 컨텐츠를 인식할 수 있기 때문이다. 또한, SSR 방식에서는 사용자가 빠른 초기 로딩 속도를 경험할 수 있다. CSR과 달리 SSR에서는 번들을 다운로드 받을 필요가 없고, 번들을 실행하여 동적으로 화면을 그려야 할 필요도 없기 때문이다.

SSR의 단점

1. 상호작용 초기화가 느리다
   페이지가 표시되기까지 걸리는 시간(TTV)과 상호작용까지 걸리는 시간(TTI) 사이에 격차가 발생한다는 것이다.
   이 시간 사이에 사용자가 버튼을 클릭해도 동작하지 않는 답답한 상황을 겪을 수 있다.
2. 서버 비용이 증가한다
   정적인 파일을 내려주기만 하면 되는 CSR과 달리 동적으로 HTML을 생성하기 위해 서버를 구동해야 하기 때문이다.