내가 헷갈려서 쓰는 렌더링 방식들 - CSR, SSR, SSG

CSR (Client-Side Rendering)

• 서버에서 미리 HTML을 생성하지 않고, 클라이언트의 브라우저에서 렌더링
• 작동 방식
  
  1. 서버는 초기 HTML 파일과 JS 파일만 제공
  2. 사용자의 브라우저는 JS파일을 받아 실행, 화면에 필요한 데이터를 서버에 요청해 페이지 구성

• 장점
  1. 필요한 부분만 새로 로딩하여 페이지 전환이 빠름 => 서버 부담 적음
  2. 사용자와 상호작용이 많은 웹 어플리케이션에서 유리 => 인터랙티브한 사용자 경험
• 단점
  1. HTML과 JS 파일을 모두 불러온 후 페이지가 렌더링되므로 초기 로딩이 길어짐 => 다운이 완료되기 전까지 화면에는 아무것도 나오지않는다.
  2. 검색 엔진이 컨텐츠를 읽지 못해 SEO의 어려움
• React, Vue, Angular 등에서 사용하는 렌더링 방식

---

SSR (Server-Side Rendering)

• 사용자가 페이지 요청 시 서버에서 실시간으로 페이지를 생성
• 장점
  1. 새로운 데이터가 자주 업데이트 되는 페이지에 적합
  2. 사용자에 따라 내용이 달라지는 대시보드, 업데이트가 잦은 뉴스 사이트 등
• 단점
  1. 서버에서 매번 페이지를 생성하여 페이지 로딩 시간이 길어질 수 있음

---

SSG (Static Site Generation)

• 빌드 시점에 모든 페이지를 미리 생성, 사용자가 요청하면 이미 생성된 페이지를 즉시 제공함
• 장점
  1. 페이지가 미리 준비되어있어 로딩속도 빠름 => 서버 부담 적음
  2. 정보가 자주 바뀌지 않는 블로그, 포트폴리오 사이트 같은 정적 콘텐츠에 적합
• 단점
  1. 실시간 데이터 업데이트 / 최신 정보 반영 어려움

---

 

요약하자면

 

CSR은 많은 상호작용이 필요할 때,

SSR은 실시간 데이터가 필요할 때,

SSG는 빠른 속도와 효율이 필요할 때 유리하다고 한다.