[WP] 웹 브라우저 렌더링이란?[렌더링 종류]

브라우저 렌더링이란 HTML, CSS, 자바스크립트 등 웹 사이트의 문서가 웹 브라우저에서 출력 되는 과정입니다. 모바일 or PC 모니터 등 브라우저에서 웹 페이지가 표시(렌더링)되는 것이라고 하는 것이 쉬운 접근 법입니다. 각각의 브라우저는 렌더링을 실행하는 렌더링^Rendering 엔진을 가지고 있습니다.

※브라우저 별 렌더링 엔진
크롬&오페라 : Blink
인터넷 익스플로러 : Trident
모질라 파이어폭스: Gecko
사파리 : WebKit

브라우저 렌더링 과정

간단하게 설명하면 클라이언트가 브라우저를 이용해 웹 사이트에 접속하면 서버 측으로부터 HTML, CSS, 자바스크립트와 같은 웹 사이트의 리소스를 다운로드 받게 됩니다. 렌더링 엔진이 DOM 트리와 CSSOM 트리를 만든 후 렌더링 트리를 형성합니다. 화면에 나오지 않는 head 태그, display 속성과 none 값이 할당된 요소는 랜더링 트리에 포함되지 않습니다. 각각의 파일들은 너비, 텍스트 크기, 색상, 간격 등을 계산해 개별 노드를 화면에 그리게 됩니다.

워드프레스 렌더링

워드프레스를 포함함 웹 페이지 렌더링 방법에는 여러가지가 있습니다.

1. 서버 사이드 렌더링(SSR)

서버 측 렌더링^{SSR: Server-Side Rendering}은 클라이언트 측 애플리케이션을 클라이언트의 브라우저로 보내기 전에 서버에서 렌더링하는 작업입니다. SSR은 초기 로딩 속도가 빠르기 때문에 잘 구현된다면 SEO에 유리합니다.

2. 클라이언트 렌더링(CSR)

클라이언트 측 렌더링^{CSR: Client-Side Rendering}의 경우 프로그래밍 된 스크립트가 서버에서 실행 및 처리되지 않고 액세스하는 브라우저에서 처리됩니다 . 동적 콘텐츠를 구현하는데 주로 사용됩니다.

3. 정적 사이트 생성(SSG)

정적 사이트 생성^{SSG: Static Site Generation}템플릿 및 콘텐츠 파일 집합에서 정적 HTML 웹 사이트를 생성하는 기술입니다. 웹 사이트의 추세가 디자인 측면에서 앱과 점점 더 유사해지고 있으며, 빠른 로딩은 SEO 순위에 중요한 영향을 줍니다. SEO 요구 사항을 충족할 수 있는 방법 중 하나가 정적 사이트 생성입니다. 워드프레스 웹 사이트에 클라이언트가 요청한 내용이 언제든지 표시될 수 있게 SSG 렌더링은 빠른 로딩에 유리합니다.

4. 증분 정적 재생(ISR)

SSR과 SSG를 결합한 방식으로 증분 적정 재생^{ISR:Incremental Static Regeneration}은 템플릿 및 콘텐츠 파일의 정적 html 웹 사이트가 생성되고 정기적으로(매 시간, 1일 등) 업데이트 됩니다.