Next.js의 SSR, SSG, ISR은 무엇인가요?

Question

Accepted Answer

이들은 페이지의 HTML이 *언제* 생성되는지에 대한 세 가지 주요 전략입니다. 페이지마다 올바른 전략을 고르는 것이 신선도, 성능, 서버 비용의 균형을 맞춥니다. ## SSG — 정적 사이트 생성 (빌드 시점) ```tsx // HTML이 `next build` 중 한 번 생성된 뒤 CDN에서 제공됨 export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` 페이지가 빌드 시점에 정적 HTML로 미리 렌더링되어 CDN에 캐싱됩니다. **가능한 가장 빠른** 전달이지만, 콘텐츠는 다음 빌드까지 고정됩니다. 거의 변하지 않는 콘텐츠에 가장 적합합니다: 마케팅 페이지, 문서, 블로그 글. ## SSR — 서버 사이드 렌더링 (요청마다) ```tsx // HTML이 모든 요청마다 새로 생성됨 export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` 서버가 요청마다 페이지를 렌더링하므로 데이터는 항상 최신입니다. 대신 응답이 느리고 방문할 때마다 서버 부하가 발생합니다. 개인화되거나 항상 신선한 데이터에 가장 적합합니다: 대시보드, 계정 페이지, 검색 결과. ## ISR — 증분 정적 재생성 (하이브리드) ```tsx // 정적이지만 N초마다 백그라운드에서 자동 재빌드됨 export const revalidate = 60; // 최대 60초에 한 번 재생성 export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR은 정적 HTML(빠름, CDN 캐싱)을 제공하면서 일정에 따라 백그라운드에서 **재검증(revalidate)**합니다. 전체 사이트를 재빌드하지 않고도 정적 성능과 주기적으로 신선한 데이터를 모두 얻습니다. 가끔 변경되는 콘텐츠에 가장 적합합니다: 상품 목록, 뉴스, 리더보드. ## 비교 ```text 속도 신선도 서버 비용 용도 SSG 가장 빠름 빌드 시점만 없음 문서, 마케팅 SSR 느림 항상 신선 요청마다 대시보드, 개인화 ISR 빠름 N초마다 가끔 카탈로그, 뉴스 ``` ## 왜 중요한가 App Router에서는 특별한 함수 대신 fetch별 캐시 옵션(`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR)으로 이를 선택합니다. 트레이드오프 — 정적은 가장 빠르지만 오래되고, SSR은 신선하지만 비싸며, ISR은 둘의 균형 — 를 이해하면 각 페이지를 성능과 데이터 신선도의 올바른 조합으로 최적화할 수 있습니다.