AI 요약관련 정보

• Next.js에서 클라이언트 컴포넌트 내 서버 액션을 통한 데이터 페칭은 내부적으로 POST 요청을 발생시켜 캐싱 불가, 병렬 처리 차단, 보안 계층 우회 등의 문제를 야기합니다. 🚫
• 데이터 페칭에 POST 요청을 사용하면 캐싱이 불가능하고 요청이 순차적으로 실행되어 성능 저하를 초래합니다. 🐌
• 올바른 데이터 페칭 방식은 React 서버 컴포넌트를 활용하여 GET 요청을 수행하고, 서버에서 데이터를 렌더링하며, 필요에 따라 캐싱하고 클라이언트로 스트리밍하는 것입니다. 🚀
• use client 지시어를 상호작용이 필요한 클라이언트 컴포넌트에만 적용하고, 데이터 페칭은 기본적으로 서버 컴포넌트(예: page.tsx)에서 직접 수행해야 합니다. 🏗️
• Suspense Boundary를 사용하여 데이터 로딩 중인 컴포넌트를 감싸면, 다른 UI 요소(예: 폼)가 즉시 로드되고 데이터 요청이 병렬로 실행되어 사용자 경험을 향상시킬 수 있습니다. ✨
• 비공개 라우트의 경우, Kind.dev와 같은 인증 솔루션을 통합하여 라우트 수준에서 사용자 세션을 검증함으로써 인가된 사용자만 데이터에 접근하도록 보안을 강화해야 합니다. 🔐
• page.tsx에서 직접 데이터를 페칭하는 방식은 재사용성과 보안(세션 검증) 측면에서 문제가 있으므로, 구조화되고 재사용 가능하며 안전한 데이터 액세스 계층(DAL)이 필수적입니다. 🧱
• React.cache 함수를 사용하여 데이터 페칭 함수를 메모이제이션하면, 동일한 요청 내에서 같은 데이터를 한 번만 페칭하도록 최적화하여 성능을 향상시킬 수 있습니다. 🧠
• 데이터 변경(예: 할 일 생성) 후에는 revalidatePath 함수를 사용하여 특정 경로의 캐시를 무효화함으로써 항상 최신 데이터가 사용자에게 표시되도록 해야 합니다. 🔄