This Next.js Data Fetching Pattern Is CRITICAL For Every Developer
- Next.js에서 새로운 데이터 가져오기 패턴이 등장했으며, 이는 React의
use
훅과 관련이 있습니다. 🎣
use
훅을 사용하면 클라이언트 컴포넌트에서 데이터를 효율적으로 가져올 수 있으며, Context API와 함께 여러 컴포넌트에 데이터를 효과적으로 분산할 수 있습니다. 🌐
- React 서버 컴포넌트에서
await
를 사용하여 데이터를 가져올 때, 데이터 가져오기가 완료될 때까지 페이지의 다른 요소들이 렌더링되지 않아 사용자 경험이 저하될 수 있습니다. ⏳
- Suspense를 사용하여 데이터 가져오기 부분을 격리하면, 다른 요소들은 즉시 렌더링되고 데이터는 나중에 스트리밍되어 사용자 경험을 향상시킬 수 있습니다. 📦
- 클라이언트 컴포넌트에서
use
훅을 사용하면 서버 측에서 데이터를 미리 가져와 클라이언트 측에서 사용할 수 있어 성능을 향상시키고, 데이터베이스에 직접 접근할 수 있습니다. 🚀