브라우저가 웹페이지를 렌더링하는 방법 — 그리고 React, CSR, SSR이 어디에 맞는지

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Please paste the content (excluding the source line you already provided) and I’ll convert it to Korean while preserving the original formatting, markdown, and any code blocks or URLs.

브라우저가 요청을 처리하는 방법

DNS 조회

브라우저는 먼저 캐시를 확인합니다. 리소스가 캐시되지 않은 경우 **도메인 네임 시스템(DNS)**에 질의하여 도메인을 IP 주소로 변환합니다.

example.com → 93.184.216.34

TCP / TLS 핸드셰이크

서버에 TCP 연결을 엽니다. 사이트가 HTTPS를 사용하는 경우, TLS 핸드셰이크를 통해 보안 채널을 설정합니다.

HTTP 요청

브라우저는 HTTP 요청을 전송합니다. 예시:

GET /index.html HTTP/1.1
Host: example.com

서버 응답

서버는 필요한 리소스(HTML, CSS, JavaScript, 이미지, 폰트 등)를 스트리밍합니다. 대부분 청크 단위로 전송되기 때문에, 전체 페이로드가 다운로드되기 전에 브라우저가 이를 처리하기 시작할 수 있습니다.

UI가 렌더링되는 방식

HTML 파싱 → DOM

HTML 바이트가 도착하자마자 파서는 Document Object Model (DOM) 트리를 구축합니다.

> **Source:** ...

## 제품

항목 1

Resulting structure:

body
 ├── h1
 └── p

CSS 파싱 → CSSOM

또는 태그가 발견되면 브라우저는 선택자를 스타일 규칙에 매핑하는 **CSS Object Model (CSSOM)**을 생성합니다.

p {
  color: blue;
}

렌더 트리 (DOM + CSSOM)

DOM과 CSSOM은 렌더 트리로 병합되며, 여기에는 실제로 그려질 노드만 포함됩니다 (“와 같은 요소나 display:none인 요소는 제외됩니다).

레이아웃 (리플로우)

브라우저는 각 가시 요소의 기하학적 정보—너비, 높이, X/Y 위치—를 계산하여 UI가 뷰포트에 맞도록 합니다.

페인팅

시각적 세부 사항(색상, 테두리, 텍스트, 그림자, 이미지)은 레이어에 래스터화됩니다. 특정 요소(스티키 헤더, 팝업, 변형된 요소, 애니메이션)는 GPU 가속 합성을 위해 별도 레이어에 배치됩니다.

컴포지팅

레이어가 합성되어 화면에 표시되는 최종 비트맵을 생성합니다.

JavaScript 실행 및 차단

“ 태그가 발견되면 HTML 파싱이 일시 중지됩니다:

브라우저는 스크립트를 다운로드하고 실행한 뒤 파싱을 재개합니다. 이 때문에 스크립트가 렌더링을 차단할 수 있습니다. 차단을 완화하려면:

React, CSR, SSR이 어디에 들어가는가

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

서버는 최소한의 HTML 쉘과 JavaScript 번들을 반환합니다. 브라우저는 처음에 빈 페이지를 표시하고, 이후 React가 클라이언트에서 UI를 구축합니다.

// main.js
ReactDOM.createRoot(document.getElementById('root')).render();

일반적인 흐름:

1. 빈 화면 →
2. JavaScript 로드 →
3. UI 표시 (React가 동적으로 DOM 노드를 생성).

서버‑사이드 렌더링 (SSR)

서버가 React 컴포넌트를 미리 렌더링하여 완전한 HTML을 생성하므로, 브라우저가 즉시 의미 있는 콘텐츠를 표시할 수 있습니다.

## 제품

Item 1

After the HTML is painted, the JavaScript bundle hydrates the page—attaching event listeners and making the UI interactive.

• Before hydration: button visible but not clickable.
• After hydration: button becomes interactive.

비교

요점

• 브라우저 렌더링 파이프라인을 이해하면 성능을 최적화하고 렌더 차단 문제를 피할 수 있습니다.
• 클라이언트 로직이 주도하는 고도로 인터랙티브한 싱글 페이지 앱에는 CSR을 선택하세요.
• 초기 로드 속도와 SEO 향상을 위해 SSR(또는 Next.js와 같은 하이브리드 접근 방식)를 선택하세요.
• 최신 프레임워크는 두 방식을 결합하여, 하이드레이션 이후 클라이언트 측 인터랙티비티와 함께 빠른 첫 페인트를 제공합니다.