SSR (Server-Side Rendering)

1. 브라우저 ── 페이지 요청 ──> 서버
2. 서버: 데이터 조회 → HTML 완성
3. 브라우저 <── 내용이 채워진 HTML ── 서버
4. 브라우저: 바로 화면 표시
5. 브라우저: JS 로드 후 버튼 등이 동작 (하이드레이션)

sequenceDiagram
    participant B as 브라우저
    participant S as Next.js 서버
    participant D as DB / API

    B->>S: 페이지 요청
    S->>D: 데이터 조회
    D-->>S: 데이터
    Note over S: HTML 렌더링
    S-->>B: 완성된 HTML
    Note over B: 바로 내용 표시
    B->>S: JS 요청
    S-->>B: JS
    Note over B: 하이드레이션<br/>클릭 등이 동작

서버 HTML 도착 → 화면은 보임 (아직 클릭 안 됨)
         ↓
JS 로드 + 하이드레이션 → 이제 클릭, 입력 가능

// app/orders/page.tsx
export default async function OrdersPage() {
  // cache: 'no-store' → 캐시하지 않고 매 요청마다 새로 가져온다
  const res = await fetch('https://api.example.com/orders', {
    cache: 'no-store',
  });
  const orders = await res.json();

  return (
    <ul>
      {orders.map((o) => (
        <li key={o.id}>{o.name}</li>
      ))}
    </ul>
  );
}

import { cookies } from 'next/headers';

export default async function MyPage() {
  const token = (await cookies()).get('token'); // 요청마다 다른 값 → SSR
  // ...
}