Server-Side Rendering vs Static Site GenerationSSR vs SSG

CSR (Client-Side Rendering):
  서버: 빈 HTML + JS 번들 전송
  브라우저: JS 실행 → DOM 생성
  TTFB 빠름 / FCP 느림 / SEO 불리

SSR (Server-Side Rendering):
  서버: 요청마다 HTML 생성 → 전송
  브라우저: HTML 즉시 렌더링 → JS hydration
  TTFB 느림(서버 처리) / FCP 빠름 / SEO 우수

SSG (Static Site Generation):
  빌드 시: HTML 미리 생성 → CDN 배포
  브라우저: CDN에서 즉시 수신 → JS hydration
  TTFB 매우 빠름 / FCP 매우 빠름 / SEO 우수

// SSR: 매 요청마다 서버에서 생성
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title };
}

export default async function Page({ params }) {
  const post = await getPost(params.slug);  // 요청마다 실행
  return <article>{post.content}</article>;
}

// SSG: 빌드 시 생성 (정적 params)
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

// ISR: 주기적 재생성
const data = await fetch(url, {
  next: { revalidate: 3600 }  // 1시간마다 재생성
});