CSR (Client Side Rendering)
서버는 빈 HTML과 JS만 내려줌
클라이언트에서 JS가 실행되며 화면 렌더링
React, Vue, Angular 등에서 주로 사용
CSR 장점
서버 부하가 적음
정적 파일만으로 배포 가능 (S3, CloudFront 등)
페이지 전환이 빠름 (SPA 구조)
CSR 단점
SEO 약함 (초기 HTML에 콘텐츠 없음)
보안에 취약 (로직이 클라이언트에 노출)
초기 로딩 속도가 느림 (JS 실행 후 화면 보임, html 로딩과 실제 화면 보여주기까지 간격 존재)
동적 콘텐츠라 CDN 캐시 적용 어려움
SSR (Server Side Rendering)
서버가 완성된 HTML을 만들어 내려줌
사용자는 바로 화면을 볼 수 있음
Next.js, Nuxt.js 등에서 사용
SSR 장점
SEO 강함 (완성된 HTML 제공)
초기 로딩 속도가 빠름
보안에 상대적으로 강함
SSR 단점
서버 부하 발생 (요청마다 렌더링)
페이지 이동이 느릴 수 있음 (새로 렌더링)
Hydration 필요 (JS 기능 활성화 작업)
Hydration이란?
SSR로 받은 HTML을 브라우저에 표시 (JS 없이)
이후 React가 도착해 이벤트, 상태 등을 연결
즉, react의 상태, 이벤트, 동작을 연결해주는 작업
JS를 필요없으니 뺀다가 아닌 기존 html에 JS를 활성화 시키는 작업
Next.js는 기본적으로 전체 Hydration을 사용하지만, Suspense 등을 통해 부분 Hydration으로 성능 최적화도 가능.
정리
| 구분 | 특징 | 장점 | 단점 |
|---|---|---|---|
| CSR | 클라이언트 JS 렌더링 | 서버 부하 적음, 정적 배포 | SEO 약함, 초기 로딩 느림 |
| SSR | 서버 렌더링 | HTML 제공 SEO 강함, 초기 화면 빠름 | 서버 부하, Hydration 필요 |
