오늘은 서버와 클라이언트 측면으로 나누어 일을 처리하는 CSR과 SSR에 대해서 정리해보았다.
렌더링
CSR은 Client Side Rendering, SSR은 Server Side Rendering이라고 한다.
두 개념에 대해 알아보기 전에 Rendering이 무엇인지 알고가보자.
웹 개발 분야에서 렌더링은 웹 페이지가 브라우저에 표시되는 과정을 가리킨다. HTML, CSS 및 JavaScript와 같은 웹 기술을 사용하여 웹 페이지의 내용과 스타일을 생성하고 사용자가 볼 수 있도록 하는 프로세스를 의미한다고 볼 수 있다. 웹 페이지를 렌더링하는 것은 웹 브라우저나 웹 서버에서 이루어질 수 있으며, 이를 통해 사용자가 웹 페이지를 볼 수 있게 되는 것이다.
Client-Side-Rendering
CSR이라고 불리는 이 용어는 웹 애플리케이션의 초기 로딩 시에 모든 HTML, CSS 및 JavaScript 파일을 클라이언트 측 (브라우저)에서 다운로드하고, 사용자의 브라우저에서 렌더링을 수행하는 방식이다.
정리하면 클라이언트는 초기에 서버로부터 비어있는 HTML과 해당 HTML로직과 관련된 JS파일들을 다운로드 받은 후에, JS파일들을 이용해 동적으로 DOM을 생성해 렌더링하는 것을 말한다고 할 수 있다.
장점으로는 동적 처리를 클라이언트 내에서 처리하기 때문에, 서버와 통신하지 않아도 되어 일처리를 빠르게 할 수 있다는 점이 있다.
단점으로는 초기에 빈 HTML파일을 완성할 모든 자원을 다운로드해야 하므로 첫 로딩 속도가 느릴 수 있다.
Server-Side-Rendering
SSR은 CSR과 반대로 서버에서 HTML파일을 채워준 후에, 완성된 HTML파일을 클라이언트에게 보내준다. 후에, 클라이언트로부터 변경사항이 요청되면 서버측에서 해당 변경사항을 수정한 HTML파일에 적용한 후에 다시 HTML을 보내준다.
장점으로는 SSR은 초기 페이지 렌더링이 서버에서 이루어지고 클라이언트는 해당 HTML파일만 받으면 되므로 첫 로딩 속도가 빠르다.
단점으로 SSR은 서버에서 페이지를 렌더링 즉, 클라이언트의 요청을 모두 서버에서 처리하므로 서버 부하가 증가할 수 있다.
초기 로딩 이후에는 CSR과 비교하여 추가 로딩 및 상호작용이 상대적으로 느릴 수 있다.
