CSR 렌더링, SSR 렌더링 과정의 차이점에 대해 알아보자! ⚖️

Sonny·2021년 8월 23일
7

Web

목록 보기
3/3
post-thumbnail

Q. CSR, SSR 둘 다 브라우저 렌더링 과정이 발생하는가? 🧐

오늘 데브코스에서 브라우저의 렌더링에 대한 좋은 질문 주제가 나왔다!

< 질문의 배경 >
"많은 블로그, 자료 등에서 SSR은 서버 사이드에서 HTML을 렌더링 하고
CSR은 클라이언트 사이드에서 HTML을 렌더링 한다고 되어 있어서 헷갈린다.."

"SSR이 서버사이드에서 HTML을 렌더링 한다면,
DOM Tree 구축, Render Tree구축, Layout, Paint등의
‘브라우저 렌더링’ 과정없이 어떻게 사용자의 화면에 시각화를 해주는거지,,?"

"서버사이드에서 HTML을 렌더링한다는 것이 브라우저에서의 렌더링과는 다른 의미인건가?"

질문에 대한 배경을 거쳐 위와 같은 질문이 나왔고, 결과적으로는 "렌더링"이라는 용어가 큰 혼란을 주어 생긴 질문이었다! 렌더링이 잘못했네..

A. 결론부터 말하자면.. YES! 🙌

질문에 대한 궁금증은 해소되었지만, 해답을 얻는 과정에서 실제로 나도 "렌더링"이라는 단어로 인해 개념이 헷갈려서 CSR vs SSR 두 방식의 렌더링 과정 차이점에 대해 정리해보고자 한다!

🚨 주의 사항 🚨
각 개념들에 대한 내용은 각설하고 렌더링 과정의 차이점에 대해서만 다룰 예정입니다!

CSR vs SSR ⚖️

기본적으로 브라우저는 어떻게 동작할까?

서버와의 통신 → 브라우저 렌더링 → 스크립트 실행

이전 글에서 정리한 브라우저의 동작원리에서 처럼, 브라우저의 동작 단계는 크게 3단계로 나뉘어진다.

이는 SSR(서버사이드 렌더링), CSR(클라이언트사이드 렌더링) 모두 동일한 단계를 거치는 것을 의미한다.
이 원리를 바탕으로 각각 브라우저가 동작하고, 렌더링하는 과정에 대해 정리해보자!

서버사이드 렌더링(SSR) 과정

SSR? 서버로부터 어느정도 완성된 HTML 파일을 받은 뒤, 렌더링하는 방식

서버와의 통신

  1. 브라우저가 서버로 요청을 보냄
  2. 서버는 요청에 따른 어느정도 완성된 HTML 파일을 응답

브라우저 렌더링 엔진에 의한 렌더링

  1. HTML을 파싱하여 HTML 태그를 하나하나 해석하여 DOM 트리 생성

    • 아직 각각 어떤 크기로 표현할 건지에 대해 CSS 코드가 필요한 상태
  2. CSS를 파싱하고 CSSOM 트리 생성

  3. DOM 트리 + CSSOM 트리 결합

  4. Render 트리 생성

    • 아직 생성만 된 상태
    • 각각의 DOM Tree 별로 어떤 스타일 정보를 가지고 있는지, 실제로 소프트웨어의 어떤 객체 모델로 객체화
  5. 브라우저가 Render 트리를 읽고 Layout 또는 Reflow 과정을 통해 위치와 크기를 결정

    • DOM 노드의 위치와 그래픽을 계산 → 어디에 위치될건지, 크기가 몇인지를 결정
  6. Render 트리 완성

  7. Render 트리를 통해 화면에 실제로 그려주는 페인팅 작업 진행

  8. 브라우저 화면에 출력

자바스크립트 실행

  1. 스크립트 태그를 통해 자바스크립트 파일을 한줄한줄 읽으며 바로 실행
    • 이때, UI는 완성이 되어 있음
    • UI에 이벤트 등록, 화면을 다크모드로 전환 등 동적인 화면 구현을 위한 기능을 붙여줌

클라이언트사이드 렌더링(CSR) 과정

CSR? 서버로부터 css,js 링크만 있는 빈 HTML파일을 전송받아 클라이언트 사이드에서 렌더링하는 방식

CSR은 SSR과의 동작 과정은 전반적으로 비슷하며, 컨텐츠를 그려주는 과정과 시점만 다르다!

서버와의 통신

  1. 브라우저가 서버로 요청을 보냄
  2. 서버는 요청에 따른 css,js 링크만 있는 빈 HTML 파일을 응답

브라우저 렌더링 엔진에 의한 렌더링

SSR에서 보았던 1~8까지의 과정을 똑같이 수행하지만 HTML파일 안에는 현재 아래와 같은 코드만 들어있다. (렌더링에 관한 내용이 js파일에 들어있는 상태)

<!-- 예시코드 입니다.  -->
...
<div id="app"></div>
<script src="app.js"></script>
...

자바스크립트 실행

  1. 스크립트 태그를 통해 자바스크립트 파일을 한줄한줄 읽으며 바로 실행
    • 이때, UI가 미완성이 되어 있으므로 JS에서 UI 요소를 하나하나 동적으로 생성하며 그려줌
    • UI를 그려줌과 동시에 이벤트 등록, 화면을 다크모드로 전환 등 동적인 화면 구현을 위한 기능을 붙여줌

위의 내용은 렌더링 과정을 공부하며 개인적으로 정리한 내용입니다.

출처 📝

profile
FrontEnd Developer

1개의 댓글

comment-user-thumbnail
2023년 2월 3일

...너무 궁금했던 건데, 정리 감사합니다!!

답글 달기