// ==========================================
// 📂 app/news/page.tsx
// 서버 컴포넌트에서 fetch 캐싱 옵션 활용하기
// ==========================================

export default async function NewsPage() {
  // 1. 실시간 데이터 (캐시 안함 - 매번 요청)
  const realtimeRes = await fetch('https://api.example.com/stock-price', {
    cache: 'no-store' // 캐시를 전혀 하지 않음 (SSR 방식)
  });
  const stock = await realtimeRes.json();

  // 2. 주기적 갱신 데이터 (10초마다 캐시 갱신 - ISR 방식)
  const newsRes = await fetch('https://api.example.com/latest-news', {
    next: { revalidate: 10 } // 10초 동안은 빠르고 동일한 응답 반환
  });
  const newsList = await newsRes.json();

  return (
    <div className="p-8 space-y-8">
      <section className="bg-red-50 p-6 rounded-xl border border-red-200">
        <h2 className="text-xl font-bold text-red-600 mb-2">📈 실시간 주가</h2>
        <p className="text-3xl font-mono">{stock.price.toLocaleString()} 원</p>
        <p className="text-sm text-gray-500 mt-2">* 새로고침할 때마다 데이터가 변동됩니다.</p>
      </section>

      <section className="bg-blue-50 p-6 rounded-xl border border-blue-200">
        <h2 className="text-xl font-bold text-blue-600 mb-4">📰 최근 뉴스 (10초 캐시)</h2>
        <ul className="space-y-2">
          {newsList.map((news: any) => (
            <li key={news.id} className="text-gray-800 border-b pb-2">{news.title}</li>
          ))}
        </ul>
        <p className="text-sm text-gray-500 mt-4">* 10초 내에 새로고침하면 서버가 캐시를 주어 매우 빠릅니다.</p>
      </section>
    </div>
  );
}