Client Side Rendering / Server Side Rendering

Jun·2021년 6월 28일
0

렌더링이란?

렌더링은 서버로부터 HTML 파일을 받아서 브라우저에 보여주는 것을 의미한다. 서버로부터 HTML 파일을 받은 브라우저는 렌더링 엔진에 의해서 HTML 파일을 DOM 트리로 만들고 화면에 스타일을 담당하는 CSS 파일들도 CSSOM 트리로 만든다. DOM 트리와 CSSOM트리를 하나로 합쳐 렌더링 트리가 만들어진다. 렌더링 트리는 화면 구성을 계산하여 결과물을 띄어준다.

Client Side Rendering

클라이언트 사이드 렌더링은 말 그대로 브라우저 측에서 자바스크립트를 사용해 결과물을 해석하여 보여주는 것이다. 대표적인 클라이언트 프레임워크는 React.js, vue.js, Angular 등이 있다.

클라이언트 사이드 렌더링에서는 브라우저 자체에서 모든 작업을 해결한다. 간단하게 설명하면 사용자가 버튼을 클릭하거나 동작을 실행할때 서버에 요청하는 것이 아니라 브라우저에서 자체에서 자바스크립트를 사용해 작업을 처리한다.

Server Side Rendering

클라이언트 사이드 렌더링이 나오기 전까지만해도 서버사이드 렌더링을 사용하는 것이 가장 일반적인 방법이였다.
서버사이드 렌더링이란 서버에서 HTML 파일을 변환하여 브라우저에 출력하는 것을 말한다. 사용자가 웹사이트에서 새로운 요청 (버튼, 페이지이동 등등) 을 할때마다 서버에 웹사이트 정보 전체를 새로 요청하는 방식이다.

클라이언트 사이드 렌더링 vs 서버 사이드 렌더링

서버 사이드 렌더링은 이벤트가 발생할 때마다 웹사이트 정보 전체를 새로 요청해야하는 방식이여서 유저가 몇번의 클릭만 해도 사이트 전체가 다시 로딩해야하는 문제가 발생한다. 정적인 웹페이지에서는 큰 문제가 없었지만 동적인 웹페이지들이 많아지면서 효율면에서 많이 떨어진다. 클라이언트 사이드 렌더링은 서버 사이드 렌더링과는 다르게 초기 렌더링 이후에 필요한 정보들만 서버에 요청보내어 부분적으로 업데이트를 할 수 있어서 서버 사이드 렌더링보다 속도면에서는 효율적이다. 서버 사이드 렌더링에도 장점이 있다. 파일을 한번에 받지않고 요청이 있을때만 렌더링됨으로 초기 로딩시간이 빠를수 있고 정적인 사이트에는 효율적이며, 검색엔진에는 최적화가 되어있다. 반면에 클라이언트 사이드 렌더링은 파일이 무거울수록 초기 로딩시간이 길어질수가 있고 검색엔진에 취약하다.

0개의 댓글