오늘 데브코스에서 브라우저의 렌더링에 대한 좋은 질문 주제가 나왔다!
< 질문의 배경 >
"많은 블로그, 자료 등에서 SSR은 서버 사이드에서 HTML을 렌더링 하고
CSR은 클라이언트 사이드에서 HTML을 렌더링 한다고 되어 있어서 헷갈린다.."
"SSR이 서버사이드에서 HTML을 렌더링 한다면,
DOM Tree 구축, Render Tree구축, Layout, Paint등의
‘브라우저 렌더링’ 과정없이 어떻게 사용자의 화면에 시각화를 해주는거지,,?"
"서버사이드에서 HTML을 렌더링한다는 것이 브라우저에서의 렌더링과는 다른 의미인건가?"
질문에 대한 배경을 거쳐 위와 같은 질문이 나왔고, 결과적으로는 "렌더링"이라는 용어가 큰 혼란을 주어 생긴 질문이었다! 렌더링이 잘못했네..
질문에 대한 궁금증은 해소되었지만, 해답을 얻는 과정에서 실제로 나도 "렌더링"이라는 단어로 인해 개념이 헷갈려서 CSR vs SSR 두 방식의 렌더링 과정 차이점에 대해 정리해보고자 한다!
🚨 주의 사항 🚨
각 개념들에 대한 내용은 각설하고 렌더링 과정의 차이점에 대해서만 다룰 예정입니다!
서버와의 통신 → 브라우저 렌더링 → 스크립트 실행
이전 글에서 정리한 브라우저의 동작원리에서 처럼, 브라우저의 동작 단계는 크게 3단계로 나뉘어진다.
이는 SSR(서버사이드 렌더링), CSR(클라이언트사이드 렌더링) 모두 동일한 단계를 거치는 것을 의미한다.
이 원리를 바탕으로 각각 브라우저가 동작하고, 렌더링하는 과정에 대해 정리해보자!
SSR? 서버로부터 어느정도 완성된 HTML 파일을 받은 뒤, 렌더링하는 방식
HTML을 파싱하여 HTML 태그를 하나하나 해석하여 DOM 트리 생성
CSS를 파싱하고 CSSOM 트리 생성
DOM 트리 + CSSOM 트리 결합
Render 트리 생성
브라우저가 Render 트리를 읽고 Layout 또는 Reflow 과정을 통해 위치와 크기를 결정
Render 트리 완성
Render 트리를 통해 화면에 실제로 그려주는 페인팅 작업 진행
브라우저 화면에 출력
CSR? 서버로부터 css,js 링크만 있는 빈 HTML파일을 전송받아 클라이언트 사이드에서 렌더링하는 방식
CSR은 SSR과의 동작 과정은 전반적으로 비슷하며, 컨텐츠를 그려주는 과정과 시점만 다르다!
SSR에서 보았던 1~8까지의 과정을 똑같이 수행하지만 HTML파일 안에는 현재 아래와 같은 코드만 들어있다. (렌더링에 관한 내용이 js파일에 들어있는 상태)
<!-- 예시코드 입니다. -->
...
<div id="app"></div>
<script src="app.js"></script>
...
위의 내용은 렌더링 과정을 공부하며 개인적으로 정리한 내용입니다.
...너무 궁금했던 건데, 정리 감사합니다!!