브라우저의 렌더링( Rendering ) 과정

1. 사용자가 브라우저를 통해 웹사이트에 접속
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 리소스를 다운 받음
3. HTML 파싱( Parsing )
   • parsing : 주어진 데이터를 구문 분석하여 의미있는 구조로 변환하는 과정
   • DOM( Document Object Model ) 트리 생성
   • HTML 문서의 구조를 트리 형태로 표현
4. CSS 파싱( Parsing )
   • CSSOM( CSS Object Model ) 트리 생성
   • 스타일 규칙을 트리 형태로 표현
5. 렌더 트리( Render Tree ) 생성
   • 앞서 만들어진 DOM 트리와 CSSOM 트리를 결합
   • 브라우저 화면에 보여지지 않는 것들은 렌더 트리로 구축되지 않는다
6. 레이아웃( Layout )
   • 렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정하는 과정
7. 페인트( Paint )
   • 레이아웃 단계에서 계산된 각 요소를 실제 화면의 픽셀로 변환해 각각의 레이어에 나누어 그림을 그리는 일
8. 컴포지팅( Compositing )
   • 개별 레이어를 결합하여 최종 화면을 만드는 것

SPA(Single Page Application)

• React / Vue.js / Svelte / Angular

CSR(Client Side Rendering)

• 클라이언트(브라우저)가 렌더링을 맡아서 하는 방식. 렌더링의 주체가 브라우저.
• 장점
  • 새로고침 시 발생하는 화면 깜빡임이 적어 사용자 경험에 도움이 된다
  • 초기 로딩 이후에는 빠른 속도로 렌더링이 가능하다
  • 필요한, 혹은 변경된 데이터만 받아서 바꾸는 방식으로 트래픽 감소
• 단점
  • 초기 로딩이 느리다
  • 검색엔진 최적화(Serach Engine Optimization**)** 에 추가적인 작업이 필요하다

SSR(Server Side Rendering)

• 서버쪽에서 렌더링을 하여 화면을 보여주는 방식. 렌더링의 주체가 서버.
• 장점
  • 서버로부터 사전에 생성한 HTML 파일을 받아와 화면을 그리기 때문에 첫 페이지 렌더링이 빠르다
  • 검색엔진 최적화(Serach Engine Optimization**)** 가 가능하다