Next.js 렌더링 전략

개념 설명

Next.js가 제공하는 SSG, SSR, ISR, CSR 렌더링 방식의 특징과 적절한 사용 시나리오.

핵심 포인트

• SSG: 빌드 타임에 HTML 생성, 최고의 성능과 SEO
• SSR: 요청마다 서버에서 HTML 생성, 실시간 데이터 필요 시
• ISR: SSG + 주기적 재생성, 정적 사이트의 동적 업데이트
• CSR: 클라이언트에서 렌더링, 인터랙티브한 앱
• App Router는 기본적으로 서버 컴포넌트, 필요시 'use client' 지시어

예시 코드

// SSG - App Router
export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  return <ProductDetail product={product} />;
}