핵심 답변
📌 CSR (Client Side Rendering)
브라우저에서 JS를 실행해 화면 렌더링
초기 로딩 느림, SEO 취약
'use client' + useEffect 조합📌 SSR (Server Side Rendering)
요청마다 서버에서 HTML 생성 후 전달
항상 최신 데이터 제공, SEO 유리
App Router:
async Server Component, cache: 'no-store'📌 SSG (Static Site Generation)
빌드 시점에 HTML 미리 생성
빠른 응답 속도, CDN 캐시 활용
App Router:
async Server Component, cache: 'force-cache'📌 ISR (Incremental Static Regeneration)
SSG + 주기적 재생성
App Router:
revalidate 옵션App Router 코드 예시
typescript
// SSR: 매 요청마다 서버에서 실행
async function Page() {
const data = await fetch('/api', { cache: 'no-store' });
return <div>{data}</div>;
}
// SSG + ISR: 60초마다 재생성
async function Page() {
const data = await fetch('/api', { next: { revalidate: 60 } });
return <div>{data}</div>;
}선택 기준
자주 업데이트 데이터 → SSR
정적 콘텐츠 (FAQ, 블로그) → SSG/ISR
사용자에 따라 다른 콘텐츠 → CSR