CSR vs SSR vs ISR

flowchart LR
    subgraph CSR
        direction TB
        C1[요청] --> C2[빈 HTML + JS 응답]
        C2 --> C3[브라우저가 JS 실행]
        C3 --> C4[브라우저가 데이터 요청]
        C4 --> C5[화면 완성]
    end

    subgraph SSR
        direction TB
        S1[요청] --> S2[서버가 데이터 조회]
        S2 --> S3[서버가 HTML 생성]
        S3 --> S4[완성된 HTML 응답]
    end

    subgraph ISR
        direction TB
        I0[빌드 시 HTML 생성] --> I1[요청]
        I1 --> I2[저장된 HTML 즉시 응답]
        I2 -. 만료됐다면 .-> I3[백그라운드에서 재생성]
    end

// ① CSR: 브라우저에서 가져온다
'use client';
import useSWR from 'swr';

export default function Products() {
  const { data } = useSWR('/api/products', (url) =>
    fetch(url).then((r) => r.json())
  );
  if (!data) return <p>불러오는 중...</p>;
  return <List items={data} />;
}

// ② SSR: 요청마다 서버에서 가져온다
export default async function Products() {
  const data = await fetch('https://api.example.com/products', {
    cache: 'no-store',
  }).then((r) => r.json());
  return <List items={data} />;
}

// ③ ISR: 미리 만들고 60초가 지나면 다시 만든다
export const revalidate = 60;

export default async function Products() {
  const data = await fetch('https://api.example.com/products').then((r) =>
    r.json()
  );
  return <List items={data} />;
}

flowchart TD
    Start([새 페이지를 만든다]) --> Q1{검색 엔진에<br/>노출되어야 하나?}

    Q1 -- 아니요 --> Q2{로그인 뒤에만 보이거나<br/>상호작용이 많은 화면인가?}
    Q2 -- 예 --> CSR["CSR<br/>'use client' + SWR"]
    Q2 -- 아니요 --> Q3

    Q1 -- 예 --> Q3{사용자마다<br/>내용이 다른가?}
    Q3 -- 예 --> SSR[SSR<br/>요청마다 렌더링]
    Q3 -- 아니요 --> Q4{데이터가 항상<br/>최신이어야 하나?}

    Q4 -- 예 --> SSR
    Q4 -- 아니요 --> Q5{데이터가<br/>바뀌기는 하나?}

    Q5 -- 거의 안 바뀜 --> SSG[SSG<br/>빌드 시 1회 생성]
    Q5 -- 가끔 바뀜 --> ISR[ISR<br/>revalidate 설정]

    ISR --> Q6{수정 즉시<br/>반영돼야 하나?}
    Q6 -- 예 --> OD[On-demand ISR<br/>revalidatePath / revalidateTag]
    Q6 -- 아니요 --> TB[시간 기반 ISR<br/>revalidate = N초]

    classDef csr fill:#fde68a,stroke:#b45309,color:#000
    classDef ssr fill:#fca5a5,stroke:#b91c1c,color:#000
    classDef isr fill:#86efac,stroke:#15803d,color:#000
    classDef ssg fill:#93c5fd,stroke:#1d4ed8,color:#000
    class CSR csr
    class SSR ssr
    class ISR,OD,TB isr
    class SSG ssg

flowchart LR
    subgraph Same["모두에게 같은 내용"]
        A1[회사 소개 / 약관] --> SSG1[SSG]
        A2[블로그 글 / 뉴스] --> ISR1[ISR]
        A3[상품 상세 / 카테고리] --> ISR2[ISR]
    end

    subgraph Diff["요청·사용자마다 다른 내용"]
        B1[검색 결과] --> SSR1[SSR]
        B2[장바구니 / 주문 내역] --> SSR2[SSR 또는 CSR]
        B3[관리자 대시보드] --> CSR1[CSR]
        B4[실시간 차트 / 채팅] --> CSR2[CSR]
    end

flowchart TD
    Page["상품 상세 페이지 (ISR)"] --> Info["상품 정보<br/>서버 컴포넌트 · ISR로 캐시"]
    Page --> Review["리뷰 목록<br/>서버 컴포넌트 · ISR로 캐시"]
    Page --> Cart["장바구니 버튼<br/>클라이언트 컴포넌트"]
    Page --> Stock["실시간 재고<br/>클라이언트 컴포넌트 · CSR로 조회"]