🌐 렌더링 방식별 비교
| 구분 | CSR (클라이언트) | SSR (서버) | SSG (정적) | ISR (점진적 정적) |
|---|---|---|---|---|
| 초기 로딩 속도 | 느림 | 빠름 | 매우 빠름 | 매우 빠름 |
| SEO (검색엔진 최적화) | 불리 | 유리 | 매우 유리 | 매우 유리 |
| 서버 부하 | 매우 낮음 | 높음 | 거의 없음 (CDN) | 낮음 (주기적 생성) |
| 데이터 최신성 | 실시간 | 실시간 | 빌드 시점 | 주기적 업데이트 |
| 주요 사용 사례 | 대시보드, 복잡한 웹앱 | 뉴스, 이커머스 | 블로그, 기술 문서 | 데이터 변경이 필요한 정적 사이트 |
| 대표 도구 | Vite, CRA | Next.js, Nuxt.js | Next.js, Gatsby | Next.js |
요약
- CSR (
Vite): 사용자 상호작용이 가장 중요할 때. - SSR (
Next.js): 첫 페이지 로딩 속도와 SEO가 중요할 때. - SSG/ISR (
Next.js): 속도를 극대화하고 서버 부하를 최소화하고 싶을 때.