클라이언트 컴포넌트에서 데이터 페칭

npm install swr
# 또는
yarn add swr

// src/app/client-data/SWRFetcher.tsx
"use client"; // 클라이언트 컴포넌트임을 명시

import useSWR from 'swr';
import React from 'react';

interface Post {
  id: number;
  title: string;
  body: string;
}

// 데이터를 가져오는 fetcher 함수 (SWR에 전달)
const fetcher = async (url: string) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Failed to fetch posts: ${res.status}`);
  return res.json();
};

export default function SWRFetcher() {
  // useSWR 훅을 사용하여 데이터 페칭 및 캐싱 관리
  const { data, error, isLoading } = useSWR<Post[]>('http://localhost:4000/posts?_limit=3', fetcher);

  if (error) return <p style={{ color: 'red' }}>SWR 에러: {error.message}</p>;
  if (isLoading) return <p>SWR로 게시물을 불러오는 중입니다...</p>;

  return (
    <div style={{ border: '1px dashed #6c757d', padding: '15px', marginTop: '20px', borderRadius: '8px' }}>
      <h2 style={{ color: '#6c757d' }}>SWR로 가져온 게시물 목록</h2>
      <ul>
        {data?.map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
          </li>
        ))}
      </ul>
      <button onClick={() => alert('SWR 캐싱된 데이터!')}>데이터 확인</button>
    </div>
  );
}

// src/app/client-data/page.tsx
import ClientDataFetcher from './ClientDataFetcher';
import SWRFetcher from './SWRFetcher'; // SWRFetcher 임포트

export default function ClientDataPage() {
  return (
    <div>
      <h1>클라이언트 컴포넌트 데이터 페칭 예제</h1>
      <p>이 페이지는 서버 컴포넌트이지만, 아래 데이터는 클라이언트 컴포넌트에서 가져옵니다.</p>
      <ClientDataFetcher />
      <SWRFetcher /> {/* SWRFetcher 컴포넌트 추가 */}
    </div>
  );
}

import ClientInteractiveComponent from './ClientInteractiveComponent';

async function getServerData() {
  // 서버에서만 접근 가능한 민감한 데이터나 초기 데이터 페칭
  const data = await fetch('...');
  return data.json();
}

export default async function SomePage() {
  const initialData = await getServerData(); // 서버에서 초기 데이터 페칭

  return (
    <div>
      <h1>서버에서 렌더링된 제목</h1>
      <p>초기 데이터: {initialData.someValue}</p>
      {/* 클라이언트 컴포넌트에 초기 데이터를 prop으로 전달할 수 있습니다. */}
      <ClientInteractiveComponent initialClientData={initialData.clientSpecificValue} />
    </div>
  );
}

"use client";

import React, { useState, useEffect } from 'react';

export default function ClientInteractiveComponent({ initialClientData }: { initialClientData: string }) {
  const [dynamicData, setDynamicData] = useState(initialClientData);
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 사용자 상호작용 후 데이터 페칭 또는 브라우저 API 사용
    const interval = setInterval(() => {
      setCount(prev => prev + 1);
      // fetch('/api/realtime-update').then(...)
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ border: '1px solid blue', padding: '10px', marginTop: '10px' }}>
      <p>클라이언트에서 업데이트되는 데이터: {dynamicData}</p>
      <p>카운트: {count}</p>
      <button onClick={() => setDynamicData('새로운 데이터: ' + new Date().toLocaleTimeString())}>데이터 업데이트</button>
    </div>
  );
}