[개발자 기본 지식] 렌더링이란? 서버사이드렌더링(SSR)과 클라이언트사이드렌더링(CSR)

 

컴퓨터는 그러면 어떻게 사용자의 화면을 보여주는 것일까?

프론트엔드 쪽을 공부한다면 한번쯤 들어봤을 SSR(서버사이드렌더링), CSR(클라이언트사이드렌더링) 이두개를 알아보기전,

 

렌더링은 뭘까?

렌더링은 뭘까?
 쉽게 말하면, 컴퓨터가 사용자에게 웹페이지나 앱을 시각적으로 보여주기 위해 화면을 보여주는 과정이다.

 

프론트엔드 개발자가 알아야 할 브라우저 렌더링의 모든 것 : CSR과 SSR의 이해와 기술 및 최적화 전략 [그림 7-7] 브라우저 렌더링 과정

  브라우저는 서버로 부터 받아온 HTML, CSS, JavaScript의 자료를 받아서 해석하고, 사용자가 볼 수 있는 화면에 요소들을 그려주는 과정이다.

  - HTML은 웹페이지의 구조와 내용을 정의하는 마크업 언어고,

  - CSS는 스타일과 레이아웃을 지정하는 스타일시트, 

  - JavaScript는 동적인 기능과 사용자와 상호작용할 수 있게 구현하는 프로그래밍언어이다.

 

그렇다면, 데이터들을 받아와서 어떻게 화면에 보여주게 되는 것일까?

  렌더링은 브라우저가 HTML문서를 해석하고 DOM(Document Object Model) 트리를 생성하는데, DOM 트리는 HTML 요소들의 계층구조를 나타내는 객체 모델이다. 문서를 해석하고 DOM트리를 생성하고 나면 CSS에서 스타일 정보를 이용하여 각 요소의 스타일을 계산하고 CSSOM를 생성한다. 그 이후, JavaScript코드가 실행되면서 동적으로 DOM을 조작하거나 CSSOM로 스타일을 변경할 수 있는데, 이러한 변경사항은 브라우저의 렌더링 엔진에 의해 처리되어 화면에 실시간으로 반영된다.

 

구분	DOM	CSSOM
목적	HTML문서의 구조를 표현하고, 웹페이지의 요소들을 계층구조로 나타냄	CSS 스타일 정보를 표현하고, 스타일 계산하여 제공함
구조	HTML 문서의 구조를 표현하는 트리 구조로 ,각 요소는 노드로 나타냄 각 노드는 태그, 속성, 텍스트 등을 포함한 정보을 가짐	CSS 스타일 정보를 표현하는 계산된 객체 모델로, 각 요소는 스타일정보를 가지고 있음 각 스타일 정보는 선택자, 속성, 값 등을 포함함
역할	웹페이지의 구조를 제어하고 동적인 기능과 상호작용을 구현하기 위해 사용됨 JavaScript를 사용해 DOM을 조작하고 요소의 추가, 수정, 삭제 등을 수행할 수 있음	웹페이지의 스타일을 제어하고, 동적으로 스타일을 변경하기 위해 사용됨 JavaScript를 사용하여 CSSOM을 조작하고, 스타일 규칙의 추가, 수정, 삭제 등을 수행할 수 있음

 

 

렌더링방식은 왜 CSR과 SSR이 되었을까?

  웹페이지가 단순했던 초기에는 CSR(클라이언트 사이드 렌더링)은 서버가 클라이언트에게 빈 HTML 문서를 전달하면 클라이언트 측에서 데이터를 처리하고 렌더링 방식이였다. 이로 인해, 초기 로딩 속도가 느린 문제가 발생했고, 검색 엔진이 웹페이지의 콘텐츠를 파악하기 어렵다는 문제가 있었습니다.

  최근 웹 애플리케이션의 복잡성이 증가하면서 초기 로딩 속도와 SEO에 대한 요구가 높아지면서 SSR이 등장하게 되는데, SSR(서버사이드 렌더링)은 서버에서 웹페이지의 초기 렌더링을 처리하여 완성된 HTML 문서를 클라이언트에게 전달하는 방식입니다. 그래서 초기 로딩 속도를 개선하고, 검색엔진이 페이지의 콘텐츠를 파악하는데 용이합니다.

 

CSR

장점

• 초기 로드만 완료되면 이후 빠름(동적인 상호작용과 사용자 경험이 좋음)
• 클라이언트에서 데이터를 처리하기때문에 서버 부담이 적음(서버 요청 할 일이 거의 없음 필요시에만 요청)

단점

• 초기 로딩속도가 느림 
• SEO가 좋지않음(빈 HTML 파일을 받기 때문에 실제 콘텐츠 파악하기 어려워 봇이 데이터 수집하기 어려움)

SSR

장점

• 초기 로딩 속도가 빠름(서버에서 웹페이지 초기렌더링을 처리함)
• SEO에 좋음(이미 완성된 HTML문서를 받아서 봇이 인식할 수 있음)

단점

• 서버에 요청하는 일이 많아 서버 부하가 큼
• 서버응답시간에 따라 렌더링 지연

 

참고

프론트엔드 개발자가 알아야 할 브라우저 렌더링의 모든 것 : CSR과 SSR의 이해와 기술 및 최적화 전략

CSR 과 SSR의 차이 그리고 SEO

서버 사이드 렌더링 그리고 클라이언트 사이드 렌더링