[C.S] 렌더링 방식 종류와 장단점

렌더링이란???

1. 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.
2. 브라우저는 서버로부터 HTML 문서를 다운 받는다. 렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 만든다.
3. 그 다음, 외부 css 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다.
   스타일은 브라우저의 자체 스타일, 사용자 정의 스타일, html 태그에 걸려있는 스타일 순서로 처리되며, 나중에 처리되는 스타일을 따르게 된다.  그러므로 인라인으로 들어가있는 스타일 속성이 우선순위를 가지는 것이다.
4. 다음으로, DOM 트리와 CSSOM을 결합하여 렌더링 트리를 형성한다.
5. 이때, 화면에 드러나지 않는 head 태그나 display 속성에 none 값이 할당된 요소는 렌더 트리에 포함되지 않는다.
6. 다음은 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정이 진행된다. 이 단계가 레이아웃 단계이며, 리플로우라고도 한다.
7. 페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트부터 시작하여 렌더링 트리를 순회한다.
8. 이 작업이 끝나면, 이제 렌더링 엔진은 각 요소가 어디에 어떤 크기로 표현될지 알게 된다. 렌더링 엔진은 페인트 이벤트를 발생시켜 렌더링 트리를 화면에 그리고, 이 과정을 페인팅 또는 래스터화 라고 한다.

렌더링 방식(SSR, CSR)

• 서버 사이드 렌더링 (SSR)
  • 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식
  • 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공
  • 즉! 서버가 화면을 그리는 주체이다.

 

• 클라이언트 사이드 렌더링 (CSR)
  • 클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식
  • 즉! 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체이다.

 

렌더링 방식에 따른 장단점

• 서버 사이드 렌더링(SSR)의 장단점
  • 장점!
    1. 첫 페이지 로딩속도가 클라이언트 사이드 렌더링에 비해 더 빠르다.
    2. 해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 렌더링 하기 때문
  • 단점
    1. 초기 로딩 이후 페이지 이동 시 속도가 다소 느리다.
• 클라이언트 사이드 렌더링( CSR) 의 장단점
  • 장점 
    1. 네이티브 앱과 비슷한 빠른 인터렉션을 구현 할 수 있음
    2. view 렌더링을 브라우저에게 담당 시킴으로서 서버 트래픽을 감소 시키고 사용자에게 더 빠른 인터렉션을 제공한다.
    3. 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.
  • 단점
    1. 첫 페이지 로딩 속도가 서버 사이드 렌더링에 비해 다소 느림
    2. 서버에 첫 요청시 전체 페이지에 대한 모든 문서 파일을 받기 때문이다.
    3. 검색엔진 최적화에 대한 추가 보완 작업이 필요하다

SPA?!

• Single - Page - application  으로 웹 브라우저가 전체 새 페이지를 로드 하는 기본 방법 대신 웹 서버의 새 데이터로 현제 웹 페이지를 동적으로 재 작성하여 사용자와 상호작용하는 웹 어플리케이션이다.