테크커런트

📖 본문

1. 크리티컬 렌더링 패스란?

브라우저가 HTML, CSS, JavaScript를 해석하고,
**사용자가 볼 수 있는 화면(Pixel)**으로 만드는 전체 과정을 말합니다.
즉, “코드를 → 화면”으로 바꾸는 여정이죠.

2. 단계별 과정

① HTML 파싱 → DOM 생성

• 브라우저가 HTML 파일을 위에서부터 한 줄씩 읽음
• 태그를 구조화하여 DOM(Document Object Model) 트리로 만듦

② CSS 파싱 → CSSOM 생성

• <link> 또는 <style> 태그의 CSS를 해석
• CSS 규칙을 트리 구조로 만들어 CSSOM 형성

③ Render Tree 생성

• DOM + CSSOM 결합 → 렌더 트리(Render Tree) 생성
• 실제 화면에 보여질 요소와 스타일 정보만 포함

④ 레이아웃(Layout)

• 각 요소의 크기와 위치 계산
• 반응형이라면 화면 크기에 맞춰 재계산

⑤ 페인팅(Paint)

• 색상, 그림자, 이미지 등을 픽셀 단위로 채움

⑥ 합성(Composite)

• 여러 레이어를 합쳐 최종 화면을 그림

3. 중요한 점 — 렌더링 속도에 영향을 주는 요소

• CSS와 JS 로드 순서
  • CSS가 늦게 로드되면 렌더링이 지연됨
  • JS는 DOM 파싱을 멈추게 할 수 있음 (defer, async 활용)
• 이미지 용량
  • 용량이 크면 페인팅에 시간 많이 걸림
• 리플로우 / 리페인트 최소화
  • DOM 구조나 스타일 변경이 많으면 속도 저하

4. 브라우저 렌더링 흐름 그림

HTML → DOM 생성
CSS → CSSOM 생성
DOM + CSSOM → Render Tree 생성
Render Tree → Layout(크기·위치 계산)
Layout → Paint(색칠)
Paint → Composite(합성)

📌 정리 표

단계                                                                                   설명

프론트엔드 개발을 하다 보면 반드시 마주치는 두 가지 렌더링 방식, 바로 CSR(Client Side Rendering) 과 **SSR(Server Side Rendering)**입니다.
각 방식은 성능, 사용자 경험, SEO 대응에 있어서 확연한 차이를 보입니다. 이 글에서는 CSR과 SSR의 특징과 차이점을 명확하게 정리해 드립니다.

✅ CSR (Client Side Rendering) 이란?

• 클라이언트에서 렌더링을 수행
• 서버는 HTML 틀과 JavaScript만 내려주고,
  브라우저가 JS를 실행하여 실제 콘텐츠를 렌더링
• 사용자 입장에서는 JS가 모두 실행되기 전까지 아무것도 보이지 않음

📌 특징 요약

• 서버는 HTML+JS 전달만 하고, 렌더링은 브라우저가 수행
• 첫 화면 진입 시 빈 화면이 잠깐 보일 수 있음
• **SPA(Single Page Application)**에 적합

✅ SSR (Server Side Rendering) 이란?

• 서버에서 HTML을 렌더링 완료된 상태로 전달
• 사용자는 JS가 실행되기 전에도 일부 내용을 볼 수 있음
• 검색 엔진이나 초기 로딩 속도에서 유리

📌 특징 요약

• 서버가 완성된 HTML을 내려주기 때문에 초기 콘텐츠 노출이 빠름
• JS 로딩은 이후에 수행되므로 사용자는 빠르게 피드백을 받음
• SEO에 더 친화적

🔍 CSR vs SSR 비교

🧠 요약 포인트

• 🔹 빠른 첫 화면이 중요하면 SSR
• 🔹 페이지 전환 속도가 중요하면 CSR
• 🔹 SEO에 민감한 페이지는 SSR 우위
• 🔹 서버 부하를 줄이고 싶다면 CSR 적합