TUTORIAL
SSR, CSR, ISR 비교
Next.js 렌더링 전략
럿지 AI 팀2025-01-1515분
Next.js 렌더링 전략
SSR
Server-Side Rendering
매 요청시 서버에서 렌더링
CSR
Client-Side Rendering
브라우저에서 렌더링
ISR
Incremental Static Regen
정적 + 주기적 갱신
렌더링 방식 비교
| 방식 | SEO | 초기 로딩 | 데이터 신선도 |
|---|---|---|---|
| SSR | 우수 | 보통 | 실시간 |
| CSR | 불리 | 느림 | 실시간 |
| SSG | 우수 | 빠름 | 빌드 시점 |
| ISR | 우수 | 빠름 | 주기적 |
사용 사례별 추천
블로그/문서
SSG + ISR
빠른 로딩, SEO 최적화
대시보드
CSR
실시간 데이터, 인터랙션
E-Commerce
SSR + ISR
SEO + 재고 실시간 반영
소셜 미디어
SSR
개인화된 실시간 피드
Next.js 13+ App Router
App Router에서는 기본적으로 서버 컴포넌트가 사용됩니다.
클라이언트 컴포넌트는 'use client' 지시어로 명시합니다.
관련 태그
#ssr
#Tutorial
#Frontend
#Development