Partial Prerendering

// === next.config.js - PPR 활성화 ===
/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        ppr: true, // Partial Prerendering 활성화
    },
};

module.exports = nextConfig;

// === app/products/[id]/page.tsx - PPR 적용 페이지 ===
import { Suspense } from 'react';
import { ProductInfo } from './ProductInfo';
import { ProductPrice } from './ProductPrice';
import { ProductReviews } from './ProductReviews';
import { RecommendedProducts } from './RecommendedProducts';

// 정적 파라미터 생성 (빌드 시)
export async function generateStaticParams() {
    const products = await getProducts();
    return products.map((product) => ({ id: product.id }));
}

// 정적 메타데이터
export async function generateMetadata({ params }: { params: { id: string } }) {
    const product = await getProduct(params.id);
    return {
        title: product.name,
        description: product.description,
    };
}

export default async function ProductPage({ params }: { params: { id: string } }) {
    // 이 데이터 페칭은 빌드 시 실행 (정적 부분)
    const product = await getProduct(params.id);

    return (
        <div className="product-page">
            {/* 정적 부분 - 빌드 시 렌더링되어 CDN에 캐싱 */}
            <header>
                <h1>{product.name}</h1>
                <ProductInfo product={product} />
            </header>

            {/* 동적 부분 - 요청 시 스트리밍 */}
            <Suspense fallback={<PriceSkeleton />}>
                <ProductPrice productId={params.id} />
            </Suspense>

            {/* 정적 부분 */}
            <section className="description">
                {product.description}
            </section>

            {/* 동적 부분 - 사용자별 추천 */}
            <Suspense fallback={<RecommendationsSkeleton />}>
                <RecommendedProducts productId={params.id} />
            </Suspense>

            {/* 동적 부분 - 실시간 리뷰 */}
            <Suspense fallback={<ReviewsSkeleton />}>
                <ProductReviews productId={params.id} />
            </Suspense>
        </div>
    );
}

// === components/ProductPrice.tsx - 동적 컴포넌트 ===
// 이 컴포넌트는 cookies() 또는 headers()를 사용하므로 동적으로 렌더링
import { cookies } from 'next/headers';

export async function ProductPrice({ productId }: { productId: string }) {
    // cookies()를 사용하면 자동으로 동적 렌더링으로 전환
    const userRegion = cookies().get('region')?.value || 'KR';

    // 지역별 가격 조회 (실시간)
    const pricing = await fetch(
        `https://api.example.com/pricing/${productId}?region=${userRegion}`,
        { cache: 'no-store' } // 동적 데이터
    ).then(res => res.json());

    return (
        <div className="price-section">
            <span className="currency">{pricing.currency}</span>
            <span className="amount">{pricing.amount.toLocaleString()}</span>
            {pricing.discount > 0 && (
                <span className="discount">{pricing.discount}% 할인</span>
            )}
            <StockStatus available={pricing.inStock} />
        </div>
    );
}

// === components/RecommendedProducts.tsx - 개인화된 추천 ===
import { headers } from 'next/headers';

export async function RecommendedProducts({ productId }: { productId: string }) {
    // headers()를 사용하면 자동으로 동적 렌더링
    const headersList = headers();
    const userId = headersList.get('x-user-id');

    const recommendations = await fetch(
        `https://api.example.com/recommendations`,
        {
            method: 'POST',
            body: JSON.stringify({ productId, userId }),
            cache: 'no-store'
        }
    ).then(res => res.json());

    return (
        <section className="recommendations">
            <h2>추천 상품</h2>
            <div className="grid">
                {recommendations.map((item: Product) => (
                    <ProductCard key={item.id} product={item} />
                ))}
            </div>
        </section>
    );
}

// === 스켈레톤 컴포넌트 (로딩 상태) ===
function PriceSkeleton() {
    return (
        <div className="price-skeleton animate-pulse">
            <div className="h-8 w-32 bg-gray-700 rounded" />
        </div>
    );
}

function RecommendationsSkeleton() {
    return (
        <section className="recommendations-skeleton">
            <h2>추천 상품</h2>
            <div className="grid grid-cols-4 gap-4">
                {[1, 2, 3, 4].map(i => (
                    <div key={i} className="h-48 bg-gray-700 rounded animate-pulse" />
                ))}
            </div>
        </section>
    );
}