01 · Concept

CSR / SSR / ISR / SSG

웹 페이지를 렌더링하는 4가지 방식을 비교합니다. 각 방식은 렌더링 시점과 장소가 다르며, 성능과 SEO에 큰 영향을 미칩니다.

CSR은 클라이언트에서, SSR은 서버에서 매 요청마다, SSG는 빌드 시점에, ISR은 빌드 + 주기적 재생성으로 HTML을 생성합니다. Next.js는 이 4가지 방식을 모두 지원하며, 페이지 특성에 맞게 선택할 수 있습니다.

02 · Interactive Demo

렌더링 방식별 타임라인 비교

각 방식의 서버 처리, HTML 전송, JS 실행, 화면 표시 시점을 비교하세요.

클라이언트 사이드 렌더링 — 빈 HTML을 받고, JS가 모든 렌더링을 담당
Timeline
서버 처리
빈 HTML 전송
JS 번들 다운로드
JS 실행 & 렌더링
인터랙티브
요청FCPTTI
Data Flow
01브라우저 → 서버 요청
02서버 → 빈 HTML + JS 번들 링크
03브라우저 → JS 다운로드 & 실행
04React → DOM 생성 & 렌더링
05화면 표시 + 인터랙티브
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// 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;
04 · Interview Point

면접 핵심 질문

CSR은 빈 HTML을 받아 클라이언트에서 JS로 렌더링합니다. SSR은 매 요청마다 서버에서 HTML을 생성합니다. SSG는 빌드 시점에 HTML을 미리 생성하여 CDN에서 배포합니다. ISR은 SSG에 revalidate 옵션을 추가해 주기적으로 백그라운드 재생성하는 방식입니다.
장점: SEO에 유리하고, 초기 로딩 시 완성된 HTML을 보여줄 수 있어 FCP가 빠릅니다. 단점: 매 요청마다 서버 렌더링이 필요하여 서버 부하가 높고, TTFB가 느려질 수 있습니다.

적합한 경우: 실시간 데이터가 필요한 페이지, 사용자별 맞춤 콘텐츠, SNS처럼 SEO와 최신 데이터가 모두 중요한 서비스에 적합합니다.
App Router 기준: 기본적으로 Server Component(SSR)입니다."use client" 지시어를 추가하면 CSR이 됩니다.generateStaticParams를 사용하면 SSG,revalidate 옵션을 설정하면 ISR이 됩니다.

Pages Router에서는 getServerSideProps(SSR),getStaticProps(SSG),getStaticProps + revalidate(ISR)로 구분합니다.