CSR은 빈 HTML을 받아 클라이언트에서 JS로 렌더링합니다. SSR은 매 요청마다 서버에서 HTML을 생성합니다. SSG는 빌드 시점에 HTML을 미리 생성하여 CDN에서 배포합니다. ISR은 SSG에
revalidate 옵션을 추가해 주기적으로 백그라운드 재생성하는 방식입니다.웹 페이지를 렌더링하는 4가지 방식을 비교합니다. 각 방식은 렌더링 시점과 장소가 다르며, 성능과 SEO에 큰 영향을 미칩니다.
CSR은 클라이언트에서, SSR은 서버에서 매 요청마다, SSG는 빌드 시점에, ISR은 빌드 + 주기적 재생성으로 HTML을 생성합니다. Next.js는 이 4가지 방식을 모두 지원하며, 페이지 특성에 맞게 선택할 수 있습니다.
각 방식의 서버 처리, HTML 전송, JS 실행, 화면 표시 시점을 비교하세요.
실제 코드로 동작 원리를 확인하세요.
// app/products/page.tsx — Next.js App Router (기본 SSR)
// Server Component: 서버에서 렌더링, JS 번들에 포함되지 않음
async function ProductsPage() {
const res = await fetch('https://api.example.com/products');
const products = await res.json();
return (
<ul>
{products.map((p) => (
<li key={p.id}>{p.name} - {p.price}원</li>
))}
</ul>
);
}
export default ProductsPage;revalidate 옵션을 추가해 주기적으로 백그라운드 재생성하는 방식입니다."use client" 지시어를 추가하면 CSR이 됩니다.generateStaticParams를 사용하면 SSG,revalidate 옵션을 설정하면 ISR이 됩니다.getServerSideProps(SSR),getStaticProps(SSG),getStaticProps + revalidate(ISR)로 구분합니다.