CSR, SSR, SSG의 차이를 설명할 수 있나요?
HTML을 어디서·언제 만드는지에 따라 나뉘는 CSR·SSR·SSG(그리고 ISR)의 동작과 적합한 상황을 정리합니다.
렌더링 전략은 HTML을 어디서(클라이언트/서버), 언제(요청 시/빌드 시) 만드느냐의 차이입니다. Next.js는 이 전략들을 페이지 단위로 선택할 수 있게 해 줍니다.
CSR (Client-Side Rendering)
브라우저가 빈 HTML과 JS 번들을 받아 클라이언트에서 화면을 그립니다. (자세히) 대시보드처럼 로그인 후 보는, SEO가 중요치 않은 동적 화면에 적합합니다.
SSR (Server-Side Rendering)
요청이 올 때마다 서버에서 HTML을 생성해 내려보냅니다. 항상 최신 데이터를 담은 완성된 HTML이 오므로 SEO·초기 표시에 유리하지만, 매 요청 서버 연산이 들어 TTFB가 늘 수 있습니다. 자주 바뀌고 개인화된 페이지에 적합합니다.
SSG (Static Site Generation)
빌드 시점에 미리 HTML을 만들어 두고, 요청 시 정적 파일을 그대로 제공합니다. 가장 빠르고 CDN 캐싱에 유리하지만, 내용이 바뀌면 다시 빌드해야 합니다. 블로그·문서·마케팅 페이지처럼 잘 안 바뀌는 콘텐츠에 적합합니다.
ISR (Incremental Static Regeneration)
SSG의 확장으로, 정적 페이지를 일정 주기(revalidate)마다 백그라운드에서 다시 생성합니다. 정적의 속도를 누리면서 데이터를 주기적으로 갱신할 수 있습니다.
비교
| 전략 | HTML 생성 시점 | 데이터 최신성 | 대표 용도 |
|---|---|---|---|
| CSR | 브라우저 런타임 | 실시간 | 로그인 후 대시보드 |
| SSR | 매 요청 | 항상 최신 | 개인화·실시간 페이지 |
| SSG | 빌드 시 | 빌드 시점 고정 | 블로그·문서 |
| ISR | 빌드 + 주기 갱신 | 주기적 갱신 | 상품·뉴스 목록 |
SSR과 SSG의 가장 큰 차이는 무엇인가요?
이 레슨을 다 읽으셨나요?
완료 표시는 이 브라우저에 저장됩니다.