AI 요약관련 정보

• use client 지시어는 필요한 최소한의 상호작용 컴포넌트에만 사용하고, 메인 페이지는 서버 컴포넌트로 유지하여 불필요한 클라이언트 측 JavaScript 번들링과 하이드레이션을 피해야 합니다. 🚫
• 대용량 이미지는 next/image 컴포넌트를 사용하여 자동으로 최적화하고, 레이아웃 시프트 방지를 위해 width, height 속성을 명시하며, next.config에 호스트 이름을 설정해야 합니다. 🖼️
• moment.js와 같은 무거운 라이브러리 대신 JavaScript의 내장 Intl.DateTimeFormat API를 활용하여 간단한 날짜 형식을 처리함으로써 번들 크기를 70KB 이상 줄이고 서버리스 함수 성능을 향상시킬 수 있습니다. 📦
• 데이터 로딩으로 인한 전체 페이지 렌더링 지연을 방지하기 위해 Next.js의 스트리밍과 React Suspense를 사용하여 정적 UI는 즉시 표시하고 동적 데이터는 로딩 완료 시점에 점진적으로 렌더링해야 합니다. 🌊
• 레이아웃 컴포넌트(서버 컴포넌트)에서 사용자 세션과 같은 동적 데이터를 직접 가져올 때 발생하는 문제점을 인지하고, 레이아웃의 특성을 고려한 데이터 관리 전략이 필요합니다. 🧩