증분 정적 재생성 (ISR)

// src/app/products/[productId]/page.tsx (새로 생성할 페이지)

import Link from 'next/link';

interface Product {
  id: string;
  name: string;
  price: number;
  lastUpdated: string; // 데이터 업데이트 시간을 확인하기 위함
}

// 1. 특정 상품 데이터를 가져오는 함수
async function getProduct(productId: string): Promise<Product> {
  console.log(`ISR 🚀: Fetching product ${productId} from API for revalidation`);

  // 실제 API 대신 더미 데이터와 지연 시간을 시뮬레이션합니다.
  // 실제 상황에서는 DB나 외부 API에서 데이터를 가져옵니다.
  await new Promise(resolve => setTimeout(resolve, 1500)); // 1.5초 지연

  const productsData = [
    { id: '1', name: '스마트워치 X', price: 299000 },
    { id: '2', name: '무선 이어폰 Pro', price: 199000 },
    { id: '3', name: '노트북 울트라', price: 1500000 },
  ];

  const product = productsData.find(p => p.id === productId);

  if (!product) {
    // 상품이 없을 경우 notFound() 함수를 사용하여 404 페이지를 렌더링할 수 있습니다.
    // import { notFound } from 'next/navigation';
    // notFound();
    throw new Error(`Product with ID ${productId} not found`);
  }

  return {
    ...product,
    price: product.price + Math.floor(Math.random() * 20000 - 10000), // 가격 변동 시뮬레이션
    lastUpdated: new Date().toLocaleTimeString('ko-KR', { hour12: false }),
  };
}

// 2. generateStaticParams 함수: 빌드 시점에 어떤 상품 페이지들을 미리 생성할지 지정합니다.
export async function generateStaticParams() {
  console.log('generateStaticParams 🔥: Preparing product IDs for initial SSG');
  const productIds = [{ id: '1' }, { id: '2' }, { id: '3' }]; // 미리 생성할 상품 ID 목록
  return productIds;
}

// 3. 페이지 컴포넌트: params를 받아 데이터를 렌더링합니다.
export default async function ProductDetailPage({ params }: { params: { productId: string } }) {
  const product = await getProduct(params.productId); // 여기서 fetch에 revalidate 옵션이 없지만,
                                                      // Next.js는 generateStaticParams와 함께 사용될 때
                                                      // 자동으로 revalidate 옵션을 적용합니다.
                                                      // 만약 generateStaticParams가 없다면 SSR로 작동합니다.

  return (
    <div style={{ padding: '25px', maxWidth: '700px', margin: '20px auto', border: '2px solid #28a745', borderRadius: '12px', boxShadow: '0 6px 12px rgba(40,167,69,0.1)' }}>
      <h1 style={{ color: '#28a745', textAlign: 'center', marginBottom: '25px' }}>{product.name} (ISR)</h1>
      <div style={{ fontSize: '1.3em', lineHeight: '1.8' }}>
        <p><strong>상품 ID:</strong> {product.id}</p>
        <p><strong>가격:</strong> <span style={{ color: '#dc3545', fontWeight: 'bold' }}>{product.price.toLocaleString()}원</span></p>
        <p><strong>마지막 업데이트:</strong> {product.lastUpdated}</p>
      </div>
      <p style={{ marginTop: '30px', textAlign: 'center', color: '#666', fontSize: '0.95em' }}>
        이 페이지는 빌드 시점에 미리 생성되었지만, <strong>10초</strong>마다 백그라운드에서 새로운 데이터로 업데이트됩니다. (페이지 새로고침 시 변경될 수 있습니다.)
      </p>
      <div style={{ marginTop: '30px', paddingTop: '15px', borderTop: '1px dashed #eee', textAlign: 'center' }}>
        <Link href="/">
          <a style={{ color: '#007bff', textDecoration: 'none', fontWeight: 'bold' }}>&larr; 홈으로 돌아가기</a>
        </Link>
      </div>
    </div>
  );
}