CSR (Client-Side Rendering)

1. 브라우저 ── 페이지 요청 ──> 서버
2. 브라우저 <── 빈 HTML + JS ── 서버
3. 브라우저: JS 다운로드 & 실행
4. 브라우저 ── 데이터 요청(API) ──> 서버
5. 브라우저 <── JSON ── 서버
6. 브라우저: 받은 데이터로 화면 완성

sequenceDiagram
    participant B as 브라우저
    participant S as Next.js 서버
    participant A as API 서버

    B->>S: 페이지 요청
    S-->>B: HTML 껍데기 + JS
    Note over B: JS 실행<br/>로딩 스피너 표시
    B->>A: 데이터 요청
    A-->>B: JSON 응답
    Note over B: 데이터로 화면 완성

<body>
  <div id="root"></div>  <!-- 아무것도 없음 -->
  <script src="/bundle.js"></script>
</body>

// app/dashboard/page.tsx
'use client';

import { useEffect, useState } from 'react';

export default function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/stats')
      .then((res) => res.json())
      .then(setData);
  }, []);

  if (!data) return <p>불러오는 중...</p>;
  return <p>오늘 방문자: {data.visitors}</p>;
}

'use client';

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export default function Dashboard() {
  const { data, error, isLoading } = useSWR('/api/stats', fetcher);

  if (error) return <p>에러가 발생했습니다</p>;
  if (isLoading) return <p>불러오는 중...</p>;
  return <p>오늘 방문자: {data.visitors}</p>;
}