Next.jsMedium#229
SSR, SSG, ISR의 차이를 설명해주세요.
#Next.js#SSR#SSG#ISR
답변 포인트
HTML 생성 시점과 갱신 방식를 기준으로 정의, 장점, 한계, 예시를 함께 설명해보세요.
정답 및 해설
빠른 요약
SSR은 요청마다 생성, SSG는 빌드 시 생성, ISR은 정적 페이지를 제공하면서 주기적으로 재생성합니다. 최신성과 성능 요구에 따라 선택합니다.
SSR, SSG, ISR은 Next.js에서 페이지를 언제 생성하고 어떻게 갱신할지에 대한 렌더링 전략입니다.
SSR
Server-Side Rendering은 요청이 올 때마다 서버에서 HTML을 생성합니다. 사용자별 데이터나 항상 최신 데이터가 필요한 화면에 적합합니다.
TSX
export default async function Page() {
const data = await fetch(url, { cache: 'no-store' });
return <View data={data} />;
}SSG
Static Site Generation은 빌드 시 HTML을 만들어 CDN에서 제공합니다. 문서, 마케팅 페이지, 자주 바뀌지 않는 상품 카탈로그에 적합합니다. 매우 빠르지만 데이터가 바뀌면 재빌드가 필요합니다.
ISR
Incremental Static Regeneration은 정적 페이지를 제공하면서 일정 시간 후 백그라운드에서 재생성합니다.
TSX
await fetch('https://api.example.com/posts', { next: { revalidate: 60 } });최대 60초 정도 오래된 데이터를 허용하고 성능을 얻는 방식입니다.
선택 기준
| 전략 | 적합한 경우 | 주의점 |
|---|---|---|
| SSR | 개인화, 실시간성 | 서버 비용/지연 |
| SSG | 거의 변하지 않는 공개 페이지 | 재빌드 필요 |
| ISR | 약간 stale 허용 가능한 공개 데이터 | 캐시 무효화 이해 필요 |
면접 답변 포인트
SSR은 요청 시, SSG는 빌드 시, ISR은 정적 생성 후 주기적으로 갱신하는 방식입니다. 데이터 신선도, 개인화, 비용, 캐시 요구사항에 따라 선택한다고 답하면 됩니다.