서버 → 빈 HTML + JS 번들 전송
브라우저 → JS 실행 → React 렌더 → API 호출 → 화면 완성

<!-- 서버에서 오는 HTML (실제로는 거의 비어 있음) -->
<html>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

사용자 요청 → 서버에서 데이터 fetch + HTML 생성 → 완성된 HTML 전송
브라우저 → HTML 즉시 렌더 → JS Hydration

// Next.js App Router (기본이 SSR)
export default async function Page({ params }: { params: { id: string } }) {
  // 요청마다 실행됨
  const data = await fetch(`https://api.example.com/posts/${params.id}`, {
    cache: 'no-store', // SSR: 캐시 없이 매번 새로 요청
  });
  const post = await data.json();

  return <Article post={post} />;
}

빌드 시 → 데이터 fetch + HTML 생성 → 정적 파일로 저장
사용자 요청 → CDN에서 HTML 즉시 반환 (서버 연산 없음)

// Next.js App Router SSG
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug); // 빌드 시 한 번만 실행
  return <Article post={post} />;
}

// 정적으로 생성할 경로 목록
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

첫 요청 → 캐시된 HTML 반환 (stale)
캐시 만료 후 첫 요청 → stale HTML 반환 + 백그라운드 재생성 트리거
다음 요청 → 새로 생성된 HTML 반환

// Next.js fetch에 revalidate 옵션 추가
export default async function Page() {
  const data = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // 1시간마다 재검증
  });
  const products = await data.json();

  return <ProductList products={products} />;
}

// 또는 route segment config
export const revalidate = 3600; // 파일 상단에 선언

// API Route
import { revalidatePath } from 'next/cache';

export async function POST(request: Request) {
  const { slug } = await request.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

// SSG (기본 — fetch 없거나 force-cache)
fetch(url, { cache: 'force-cache' });

// ISR (시간 기반 재검증)
fetch(url, { next: { revalidate: 60 } });

// SSR (매 요청마다)
fetch(url, { cache: 'no-store' });
// 또는 cookies(), headers() 같은 동적 함수 사용 시 자동으로 SSR