AI 요약관련 정보

• Next.js의 새로운 React.use 훅은 클라이언트 컴포넌트에서 SWR/React Query의 대안으로 데이터 페칭 성능을 향상시키는 중요한 패턴입니다. 🆕
• 기존 async/await 서버 컴포넌트 페칭은 데이터 로딩 완료까지 페이지 전체 렌더링을 차단하여 사용자 경험을 저해합니다. ⏳
• <Suspense>를 사용하면 async 서버 컴포넌트의 데이터 페칭을 격리하여, 데이터 로딩 중에도 페이지의 정적 부분을 즉시 표시하고 로딩 인디케이터를 보여줄 수 있습니다. 🚀
• 서버 컴포넌트는 브라우저 이벤트 핸들러나 React 훅을 사용할 수 없어 상호작용이 필요한 경우 클라이언트 컴포넌트가 필수적입니다. 🚫
• useEffect를 통한 전통적인 클라이언트 컴포넌트 페칭은 서버에서 JS를 받은 후 브라우저에서 데이터 페칭이 시작되어 지연이 발생하고, Prisma 같은 서버 전용 데이터 소스를 직접 사용할 수 없습니다. 📉
• 핵심 패턴: 서버 컴포넌트에서 await 없이 데이터 페칭 프라미스를 즉시 시작하고 (예: getData()), 이 프라미스를 클라이언트 컴포넌트에 prop으로 전달합니다. ⚡
• 클라이언트 컴포넌트에서는 React.use(promise) 훅을 사용하여 프라미스를 소비하며, 이 훅은 컴포넌트를 일시 중단시키므로 <Suspense>와 완벽하게 통합됩니다. 🎁
• 이 패턴은 데이터 페칭을 서버에서 즉시 시작하여 성능을 최적화하고, 클라이언트 컴포넌트에서 상호작용 및 React 훅을 자유롭게 사용하며, Prisma 같은 서버 전용 데이터 소스도 활용 가능하게 하여 최적의 사용자 경험을 제공합니다. ✨