[CS] CSR vs SSR vs SSG (웹 페이지 렌더링 방식 정리 🔍)

 

렌더링이란, 웹 페이지의 내용을 눈에 보이게 만들어주는 과정을 말한다.

렌더링 방식은 화면을 만들기 위한 데이터와 구조(HTML)을 누가 언제 준비하냐에 따라 다르다.

각 렌더링 방식에 대한 느낌을 정리해보자면 다음과 같다.

 

• CSR은 "브라우저야, 이 JS로 페이지를 직접 만들어!"
• SSR은 "서버가 만들어줄게. 브라우저는 그냥 보여줘!"
• SSG는 "미리 만들어둘게. 나중에 그냥 보여줘!"

그렇다면 각 렌더링 방식에 대해 자세히 알아보자!

 

---

CSR(Client Side Rendering)이란?

    클라이언트에서 페이지 내용을 만드는 방식으로, 사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다.

[CSR의 동작 과정]
1) 사용자가 웹 사이트에 접속하면 서버는 빈 HTML과 JavaScript 파일을 보냄.
2) 브라우저가 JavaScript를 로드하고 실행
3) JavaScript가 동적으로 HTML을 생성하고, 이를 브라우저에 표시
4) 추가 페이지 요청 시, 전체 페이지를 다시 로드하는 대신에 필요한 데이터만 서버에서 받아와 해당 부분만 업데이트
   → 즉, CSR은 서버로부터 빈 접시(빈 HTML)와 요리 재료(JavaScript)를 받고 요리(렌더링)를 직접 하는 방식

---

그럼 CSR을 사용했을 때의 장점과 단점은 뭘까?

 

---

SSR(Server Side Rendering)이란?

    서버에서 HTML을 완성시킨 후 브라우저로 보내는 방식이다.

[SSR의 동작 과정]
1) 사용자가 웹 사이트에 접속하면 서버에서 해당 페이지에 필요한 HTML 생성
2) 서버는 생성된 HTML을 브라우저로 보낸다.
3) 브라우저는 받은 HTML을 표시
4) 추가 페이지 요청 시, 해당 페이지에 대한 HTML을 다시 서버에서 생성하여 보낸다.
   → 즉, SSR은 서버에서 요리(웹 페이지 렌더링)를 완성시킨 후 접시에 담아서(완성된 HTML) 손님(사용자)에게 제공하는 방식

---

그럼 SSR을 사용했을 때의 장점과 단점은 뭘까?

---

SSG(Static Site Generation)란?

    미리 HTML을 만들어두고 요청이 오면 바로 보여주는 방식이다.

[SSG의 동작 과정]
1) 빌드 시 프레임워크는 모든 경로에 대한 HTML 파일을 미리 생성한다.
2) 사용자가 웹 사이트에 접속하면, 서버는 미리 생성해둔 HTML을 보낸다.
3) 브라우저는 받은 HTML을 표시
4) 추가 페이지 요청 시, 미리 생성해둔 해당 페이지의 HTML을 보낸다.
   → 즉, SSG는 미리 요리(웹 페이지 렌더링)를 완성시켜놓고, 동일한 요리를 계속 제공하는 방식

---

그럼 SSG를 사용했을 때의 장점과 단점은 뭘까?

---

그렇다면 언제 어떤 방식을 쓰는게 좋을까?

상황	추천 방식
자주 바뀌는 데이터 / 웹앱	CSR
뉴스/커머스 등 SEO가 중요한 동적 사이트	SSR
블로그, 문서, 마케팅 페이지	SSG

 

---

렌더링 방식 비교 요약

항목	CSR	SSR	SSG
렌더링 위치	클라이언트(브라우저)	서버	빌드 시 (정적 파일 생성)
속도	느린 초기 로딩, 이후 빠름	초기 빠름, 페이지 이동 느림	매우 빠름
SEO	불리	유리	매우 유리
유동 데이터	잘 맞음	적당함	안 맞음

---

[추가적으로 브라우저의 렌더링 과정을 자세히 알고 싶다면 아래 글 참고 !] ⤵️

https://y-flm.tistory.com/79

[CS] 브라우저의 렌더링 과정