렌더링 전략: SSR vs SSG vs ISR vs CSR 선택

SSR (Server-Side Rendering)
- 매 요청마다 서버에서 HTML 생성
- 항상 최신 데이터
- 서버 부하 큼
- 적합: 자주 변경 + 사용자별 데이터

SSG (Static Site Generation)
- 빌드 타임에 HTML 생성
- CDN에서 즉시 응답
- 매우 빠름
- 적합: 마케팅·블로그·문서

ISR (Incremental Static Regeneration)
- SSG + 주기적 재생성
- 빠름 + 최신성 보장
- 적합: 이커머스·뉴스

CSR (Client-Side Rendering)
- 브라우저에서 렌더
- HTML 빈 껍데기 + JS로 채움
- SEO 약함
- 적합: 대시보드·앱

// 1. 정적 (SSG) — 기본
export default function AboutPage() {
  return <h1>About</h1>;
}


// 2. fetch + revalidate (ISR)
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 },  // 1시간
  });
  return res.json();
}


// 3. 동적 (SSR) — cache: 'no-store'
async function getCart(userId: string) {
  const res = await fetch(`https://api/cart/${userId}`, {
    cache: 'no-store',
  });
  return res.json();
}


// 4. 클라이언트 (CSR)
'use client';
function Dashboard() {
  const { data } = useQuery({ queryKey: ['stats'], queryFn: fetchStats });
  return <Chart data={data} />;
}

랜딩 페이지     → SSG (빌드 타임 + CDN)
블로그 글       → SSG + ISR (작성 후 자동 갱신)
상품 목록       → ISR (60초 revalidate)
상품 상세       → ISR (3600초 revalidate)
카트           → SSR (사용자별 + 실시간)
체크아웃        → SSR + CSR 혼합
대시보드        → CSR (인증 + 인터랙션)
관리자 페이지    → CSR (백오피스)

// 정적 (빌드 타임 prerender)
- fetch 캐시 가능
- cookies/headers 호출 X
- searchParams 사용 X
- generateStaticParams 정적

// 동적 (요청마다 SSR)
- cookies() / headers() 호출
- searchParams 동적 사용
- fetch with cache: 'no-store'
- 동적 라우트 파라미터 검증

// 정적 페이지 + 동적 부분
import { headers } from 'next/headers';

export default async function ProductPage({ params }: { params: { id: string } }) {
  // SSG — 정적 데이터
  const product = await getProduct(params.id);

  return (
    <div>
      <ProductInfo product={product} />     {/* SSG */}
      <ClientCart productId={params.id} />   {/* 'use client' — 사용자별 */}
    </div>
  );
}

// 빌드 타임 정적 + 1시간마다 재생성
async function getPost(slug: string) {
  const res = await fetch(`https://api/posts/${slug}`, {
    next: {
      revalidate: 3600,
      tags: [`post:${slug}`],
    },
  });
  return res.json();
}


// On-demand revalidation
'use server';
import { revalidateTag } from 'next/cache';

export async function updatePost(slug: string, data: any) {
  await db.post.update({ where: { slug }, data });
  revalidateTag(`post:${slug}`);  // 즉시 무효화
}

import { Suspense } from 'react';

export default function DashboardPage() {
  return (
    <div>
      <h1>대시보드</h1>     {/* 즉시 응답 */}

      <Suspense fallback={<HeaderSkeleton />}>
        <Header />          {/* 빠른 컴포넌트 */}
      </Suspense>

      <Suspense fallback={<ChartSkeleton />}>
        <SlowChart />       {/* 느린 컴포넌트 (3s) */}
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <SlowTable />       {/* 5s */}
      </Suspense>
    </div>
  );
}


// → TTFB 즉시
// → 빠른 부분 먼저 렌더
// → 느린 부분 스트리밍

랜딩 페이지 (대중에게 보여지는):
SSG: TTFB 50ms, FCP 200ms, LCP 800ms
ISR: TTFB 50ms, FCP 200ms, LCP 800ms (캐시 hit)
SSR: TTFB 500ms, FCP 700ms, LCP 1500ms
CSR: TTFB 200ms, FCP 1500ms, LCP 3000ms (JS 로드 후)


→ 마케팅 페이지는 SSG/ISR 압도적