CSR, SSR, SSG 정리

CSR, SSR, SSG는 웹 애플리케이션에서 데이터를 렌더링하는 방식에 대한 개념입니다. 각각의 차이점을 이해하면 성능 최적화와 SEO(검색 엔진 최적화) 측면에서 올바른 선택을 할 수 있습니다.

CSR(Client-Side Rendering, 클라이언트 사이드 렌더링)

CSR은 유저의 브라우저에서 렌더링을 수행하는 방식입니다.

🔎 특징 :

• 서버가 브라우저로 HTML 전달 후, 브라우저에서 JacaScript를 실행하여 화면을 완성
• 초기 페이지 로딩 속도는 느리지만, 이후 클라이언트에서 빠르게 페이지 전환 가능

👍 장점 :

• 사용자 경험(UX)이 부드럽고 빠름
• 서버 부하가 적고 확장성이 높음
• 페이지 전환 시 새로고침 없이 동작 (SPA, Single Page Application에 적합)

👎 단점 :

• 초기 로딩이 느림 (HTML이 빈 상태로 전달되므로, JavaScript가 실행될 때까지 화면이 비어있음)
• SEO(검색 엔진 최적화)에 불리함 (크롤러가 JS 실행을 제대로 하지 못할 수 있음)

✅ 사용 예시 :

• React, Vue, Angular 등의 SPA (Single Page Application)
• 대시보드, 관리자 페이지, 내부 시스템 등

⚙️ 작동 방식 :

1. 사용자가 사이트 접속
2. HTML만 로드됨
3. JS가 실행되면서 API 호출
4. 데이터를 가져와 화면을 렌더링

---

SSR(Server-Side Rendering, 서버 사이드 렌더링)

SSR은 서버 측에서 렌더링을 수행하는 방식을 의미합니다.

🔎 특징 :

• 서버에서 미리 HTML을 완성한 후 브라우저에 전달하는 방식
• 첫 페이지 로딩 속도가 빠르며, SEO에 유리

👍 장점 :

• 첫 화면 로딩 속도가 빠름
• SEO 친화적 (서버에서 완성된 HTML을 제공하므로 검색 엔진이 크롤링하기 쉬움)
• JS 비활성화 환경에서도 정상적으로 동작 가능 (완성된 HTML을 보내주기에 가능)

👎 단점 :

• 서버 부담 증가 (요청이 올 때마다 HTML을 생성해서 전달해야 함)
• 페이지 전환 시에도 서버 요청이 필요하여 속도가 느릴 수 있음
• 클라이언트 측에서 인터랙티브한 기능 추가 시 성능 저하

✅ 사용 예시 :

• Next.js의 getServerSideProps
• 블로그, 뉴스 사이트 등의 데이터가 실시간으로 반영되지 않아도 되는 정적 사이트
• SEO가 중요한 서비스 (서버에서 HTML이 미리 렌더링 되므로 검색 엔진 크롤러가 내용을 확인하기 쉬워져 SEO 향상)

⚙️ 작동 방식 :

1. 사용자가 사이트 접속
2. 서버에서 HTML을 렌더링 후 전달
3. 브라우저에 즉시 표시
4. 브라우저에 화면 표시 이후에 JS 실행 (JS는 클라이언트 측에서 실행, 서버는 HTML 렌더링만 수행)

---

SSG(Static Site Generation, 정적 사이트 생성)

SSG는 빌드 시점에 HTML을 미리 렌더링하여 정적인 파일로 배포하는 방식입니다.

🔎 특징 :

• HTML이 미리 생성되어 있어 매우 빠르게 로딩됨
• CDN(콘텐츠 전송 네트워크)을 활용하여 빠르게 제공 가능

👍 장점 :

• 가장 빠른 성능(HTML이 이미 존재하므로 서버 부하 없음)
• SEO 최적화에 유리함 (완전한 HTML이 제공됨)
• 서버 비용 절감 (서버에서 매번 렌더링할 필요 없음)

👎 단점 :

• 실시간 데이터 반영이 어려움(변경된 데이터를 즉시 반영하려면 재빌드 필요)
• 동적인 페이지가 많을 경우 비효율적 (페이지가 많아질수록 빌드 시간이 길어짐)
• 사용자에게는 Hydration 되지 않는 HTML 코드가 표시되므로 만약 사용자가 화면이 보이자마자 JS 코드가 필요한 동작을 실행할 경우(ex. 버튼 클릭) 아직 Hydration 이전이기에 동작이 정상적으로 작동하지 않음

✅ 사용 예시 :

• Next.js의 getStaticProps
• 블로그, 문서 사이트, 렌딩 페이지 등의 정적 사이트

⚙️ 작동 방식 :

1. 빌드 시 HTML 생성
2. 사용자가 접속하면 미리 생성된 HTML을 바로 제공