[TIL] 서버 사이드 렌더링, 클라이언트 사이드 렌더링이란?

Yuri Lee·2021년 9월 18일

개요

서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이가 무엇인지 물어보는 질문을 받았지만, 이 질문에 재대로 대답을 하지 못했다. 😢 제대로 짚고 넘어가기 위해서 포스팅을 하도록 하자!

서버 사이드 렌더링

서버 사이드 렌더링은 정보를 화면에 표시하는 가장 일반적인 방법이다. 서버 내 HTML 파일을 변환하여 브라우저에 출력한다.

웹사이트를 방문한 경우, 브라우저는 서버에 웹사이트 내용을 요청한다. 이 요청을 처리하는 데는 몇 밀리 세컨즈밖에 걸리지 않지만 아래의 요소들이 속도에 관여한다.

인터넷 속도
서버의 위치
접속자 수
웹 사이트 최적화 정도

요청 처리가 완료되면 브라우저는 렌더링이 완료된 HTML을 가져와 화면에 표시한다. 만약, 사용자가 다른 웹사이트를 방문할 경우 브라우저는 동일한 방식으로 새로운 요청을 매번 진행한다. 이때마다 서버 사이드 렌더링은 모든 HTML을 매번 로딩한다.

HTML 초기에는 이러한 서버 사이드 렌더링을 사용해야만 했다. 서버에 .html 페이지를 업로드 하고, 서버가 요청을 따라 사용자의 브라우저에 출력하는 방식이었다. Html 초기에는 대부분 단순한 텍스트와 정적인 이미지를 표시했으므로, 서버 사이드 렌더링에 큰 문제가 없었습니다.

오늘날 웹사이트는 애플리케이션 수준으로 진화했으며, 사용자는 웹사이트에서 메시지를 전송하고, 정보를 업데이트하고, 쇼핑을 사용하기도 한다. 하지만 서버 사이드 렌더링은 요청이 발생할 때마다 웹사이트 정보 전체를 요청하는 방식이므로 사이트 전체가 다시 로딩되어야 하는 문제가 발생하기 시작했다.

클라이언트 사이드 렌더링은 이러한 문제를 어느정도 해결한다.

장점

검색 엔진 SEO에 최적화
- 검색 엔진 최적화(영어: search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다.
초기 화면 로딩이 빠름
정적인 사이트에 좋음

단점

잦은 서버 요청
전체적으로 느린 페이지 렌더링
모든 페이지를 리로딩
사이트 상호 작용의 부족

클라이언트 사이드 렌더링

브라우저에서 자바스크립트를 사용해 콘텐츠를 렌더링하는 것을 의미한다. 즉 HTML 문서 자체에 모든 내용이 저장되는 것이 아니라, 자바스크립트를 사용하여 HTML 문서에 렌더링을 진행하는 것이다. 클라이언트 사이드 렌더링은 Vue.js와 React.js의 등장으로 인기를 끌었다.

클라이언트 사이드 렌더링에서는 사용자가 '클릭'을 하거나 동작을 실행할 때, 더 많은 페이지 요소가 추가된다. 서버 사이드 렌더링과 차이점이라면 서버에 문서를 요청하는 것이 아니라 브라우저에서 이를 처리한다는 것이다. 즉 자바스크립트를 통해 새로운 콘텐츠를 불러오고, 삭제할 수도 있는 것이 클라이언트 사이드 렌더링이다.

클라이언트 사이드 렌더링은 속도 면에서 우수한데, 새로운 콘텐츠를 표시하기 위해 전체 페이지가 아닌 웹페이지의 아주 일부만 불러오기 때문이다.