[Frontend] 렌더링의 3가지 방식: CSR, SSR, SSG

목차 (OPEN)

🖼️ 렌더링이란
⚙️ 브라우저의 렌더링 과정
💡 렌더링 방식의 세 가지 분류
⚖️ CSR vs SSR vs SSG 비교
🙄 어떤 방식을 선택해야 할까?
🔚 결론

🖼️ 렌더링이란

앞선 포스팅에서 설명했었지만

중요한 만큼 다시 한 번 짚고 넘어가자면,

렌더링이란 HTML, CSS, Java Script를 해석해서 실제 화면 (UI)으로 그려주는 것이다.

조금 더 구체적으로 설명하자면,

HTML 👉🏻 구조 담당

CSS 👉🏻 스타일 담당

Java Script 👉🏻 동작 및 로직 담당

이 세 가지를 브라우저가 해석해서 시각적으로 보여주는 과정이 렌더링이다.

⚙️ 브라우저의 렌더링 과정

브라우저는 아래의 5단계 과정을 통해 화면을 그린다.

1️⃣ DOM & CSSOM 생성

브라우저가 HTML 파일을 읽으면서

이를 DOM 트리 (Document Object Model)라는 구조화된 객체 형태로 변환한다.

이 때, DOM이란 문서의 구조,

즉 태그 간의 부모-자식 관계를 트리 형태로 표현한 것이다.

예를 들어 <body> 안에 <div>가 있고, 그 안에 <p>가 있는 구조처럼 계층적으로 구성된다.

동시에, 브라우저는 CSS 파일도 읽어서

CSSOM (CSS Object Model)이라는 스타일 정보 객체 트리를 생성한다.

CSSOM에는 클래스, ID, 인라인 스타일 등 적용된 스타일 정보가 모두 포함된다.

이러한 두 개의 트리는 아직은 별개로 존재하지만,

다음 단계에서 만나게 된다.

2️⃣ Render Tree 생성

이제 브라우저는 DOM과 CSSOM을 결합해서

화면에 실제로 보여질 요소들만 포함된 Render Tree를 생성한다.

예를 들어

<div style"display: none"> 👉🏻 화면에 안 보이기 때문에 제외

<head>나 <meta> 등 👉🏻 화면에 안 보이기 때문에 제외

visibility: hidden 👉🏻 Render Tree에는 포함되지만, 화면에 보이지는 않음

이처럼 Render Tree 생성 단계에서는

브라우저가 무엇을 사용자에게 보여줄지를 결정한다.

3️⃣ Layout 단계 (Reflow)

Render Tree가 만들어졌다면,

이제 각 요소가 브라우저 화면 어디에 배치될지를 계산한다.

이때 고려되는 정보는 아래와 같다.

width, height, padding, margin, position 등 크기와 위치 정보,

flex / grid 같은 레이아웃 구조,

%, vw, vh 같은 상대 단위

이때 만약 반응형 디자인이라면,

브라우저의 뷰포트 크기에 따라 계산 결과도 달라지게 된다.

이러한 과정을 Layout 또는 Reflow라고 부르며,

요소의 크기나 위치가 바뀌면 다시 계산이 필요하기 때문에

성능에 민감한 단계이다.

4️⃣ Paint

Layout 단계에서 계산된 정보를 바탕으로

브라우저가 실제로 화면을 그리는 단계이다.

이때 그려지는 요소는 아래와 같다.

텍스트

이미지

배경색

border

box-shadow

버튼, 아이콘 등 시각적 요소들

이러한 Paint 단계는 실제 픽셀 단위로 이루어지기 때문에

복잡한 스타일이 많을수록 시간이 왤 걸려서

퍼포먼스 저하로 이어질 수 있다.

5️⃣ Reflow & Repaint

Java Script코드나 사용자 입력이 발생하면 화면에 변화가 생기기 때문에

화면이 한 번 그려졌다고 끝나는 것이 아니다.

이런 상황에서 브라우저는 다시

Layout (Reflow) -> Paint (Repaint)를 수행해서

변화된 부분만 다시 렌더링하게 된다.

이게 바로 리렌더링이고,

이것이 지나치게 자주 일어나면 성능 저하의 원인이 되기도 한다.

💡 렌더링 방식의 세 가지 분류

1️⃣ CSR (Client-Side Rendering)

CSR은 말 그대로 클라이언트 (브라우저)에서 렌더링을 수행하는 방식이다.

📌 동작 과정

1) 브라우저가 서버에 요청을 보낸다.

2) 서버는 빈 HTML 파일 (index.html)과 함께 JavaScript 파일(bundle.js)을 내려준다.

3) 브라우저는 Java Script를 실행해서 필요한 UI를 생성하고 화면에 그려준다.

👉🏻 즉, 초기에는 빈 화면만 있다가, Java Script가 실행되면 그때서야 내용을 렌더링하게 되는 방식이다.

📌 예시

React, Vue, Angular 등의

SPA (Single Page Application)가 대표적인 CSR 방식이다.

📌 장점

Java Script만으로 처리되기 때문에 페이지 전환이 빠르며,

사용자와의 상호작용이 빠르고 부드럽다.

📌 단점

처음엔 내용 없는 HTML이 내려오기 때문에

검색엔진이 내용을 읽지 못할 수 있어서

SEO에 불리하며,

JavaScript를 다 불러오고 실행되기 전까지는

사용자에게 비어있는 화면만 보이기 때문에

첫 화면 로딩 속도가 느리다.

2️⃣ SSR (Server-Side Rendering)

앞서 말한 CSR의 단점을 보완하기 위해서 등장한 것이 SSR로,

서버에서 미리 렌더링된 HTML을 생성해서

클라이언트에 내려주는 방식이다.

📌 동작 과정

1) 사용자가 브라우저에서 URL을 요청한다.

2) 서버가 해당 페이지를 HTML 형태로 즉시 생성해서 응답한다.

3) 브라우저는 HTML을 그대로 그려서 보여주고,

이후 JavaScript가 로드되며 인터랙션 기능이 추가된다.

📌 예시

Next.js가 대표적인 SSR 기반 프레임워크이다.

📌 장점

HTML에 이미 콘텐츠가 있기 때문에 검색엔진이 내용을 쉽게 읽어서

SEO에 강하며,

사용자는 즉시 완성된 화면을 볼 수 있기에

첫 로딩 속도가 빠르다.

📌 단점

모든 요청마다 페이지를 새로 렌더링해야 돼서 서버 부하가 크고,

클라이언트에서 다시 JavaScript가 실행되며 재렌더링이 일어나서 깜빡임이 발생할 수 있으며,

동적 상호작용은 CSR 보다 느리다.

3️⃣ SSG (Static Site Generation)

SSG는 HTML을 미리 정적으로 만들어두고,

사용자가 요청할 때 바로 보여주는 방식이다.

📌 동작 과정

1) 빌드할 때 미리 모든 HTML 페이지를 생성해둔다.

2) 사용자가 요청하면 서버는 단순히 만들어진 HTML 파일을 그대로 응답한다.

📌 예시

Gatsby, Next.js (Static 모드) 등이 SSG를 지원한다.

📌 장점

정적 파일을 그대로 응답하면 되기에 속도가 매우 빠르고,

서버 부하가 없으며,

SEO에 최적화되어 있다.

📌 단점

게시글이 자주 바뀌는 경우 등 동적 데이터에는 부적합하며,

페이지가 많아질수록 빌드 시간이 오래 걸린다.

👉🏻 한 번 만든 페이지를 배포 후에는 서버 연산 없이도 보여줄 수 있어서

정적 블로그, 문서 사이트 등에 적합하다.

⚖️ CSR vs SSR vs SSG 비교

항목	CSR	SSR	SSG
렌더링 위치	클라이언트	서버	빌드 시 정적 생성
SEO 적합성	❌ 낮음	✅ 좋음	✅ 매우 좋음
첫 로딩 속도	❌ 느림	✅ 빠름	✅ 매우 빠름
페이지 전환	✅ 빠름	🔶 보통	✅ 빠름
서버 부하	✅ 적음	❌ 큼	✅ 없음
실시간성	✅ 좋음	✅ 좋음	❌ 제한적

🙄 어떤 방식을 선택해야 할까?

1️⃣ CSR이 적합한 경우

대시보드, 관리 페이지, 앱 느낌의 UX가 필요한 경우

SEO가 중요하지 않거나, 로그인 후 화면 중심인 경우

2️⃣ SSR이 적합한 경우

뉴스, 쇼핑몰, 블로그 등 SEO가 중요한 콘텐츠 기반 웹 사이트

초기 로딩 속도 개선이 필요한 경우

3️⃣ SSG가 적합한 경우

블로그, 문서 사이트, 마케팅 페이지 등 변화가 적고 정적인 페이지

빌드 시간은 오래 걸려도 상관 없는 경우

🔚 결론

최근에는 Next.js처럼 CSR, SSR, SSG를 혼합해서 사용하는 하이브리드 접근 방식이 대세라고 한다.

상황에 따라 렌더링 전략을 유연하게 선택할 수 있도록 설계하는 게 중요할 것 같다.

'💻공부 기록 > 📌 Frontend' 카테고리의 다른 글

[Frontend] 패키지 매니저의 동작 과정 (2)	2025.06.04
[Frontend] 패키지 매니저 (1)	2025.06.03
[Frontend] 렌더링(Rendering)이란 (0)	2025.05.31
[Frontend] React란 (1)	2025.05.27
[Frontend] React Router로 SPA에서 페이지 이동 구현하기 (1)	2025.05.27

SSOSSO._.

[Frontend] 렌더링의 3가지 방식: CSR, SSR, SSG

🖼️ 렌더링이란

⚙️ 브라우저의 렌더링 과정

💡 렌더링 방식의 세 가지 분류

⚖️ CSR vs SSR vs SSG 비교

🙄 어떤 방식을 선택해야 할까?

🔚 결론

'💻공부 기록 > 📌 Frontend' 카테고리의 다른 글

티스토리툴바

[Frontend] 렌더링의 3가지 방식: CSR, SSR, SSG

🖼️ 렌더링이란

⚙️ 브라우저의 렌더링 과정

💡 렌더링 방식의 세 가지 분류

⚖️ CSR vs SSR vs SSG 비교

🙄 어떤 방식을 선택해야 할까?

🔚 결론

'💻공부 기록 > 📌 Frontend' 카테고리의 다른 글

'💻공부 기록/📌 Frontend' Related Articles

티스토리툴바