Việc lấy dữ liệu ở trong hook useEffect là phổ biến nhưng có những bất lợi sau:

  • Dữ liệu không được load ở phía server: client cần phải tự lấy dữ liệu.
  • Network waterfall: là vấn đề xảy ra khi parent component lấy dữ liệu xong rồi mới đến child component lấy dữ liệu thay vì lấy tất cả dữ liệu cùng lúc.
  • Không thể cache dữ liệu: nếu component remounting thì nó sẽ phải lấy dữ liệu một lần nữa.

Một số giải pháp thay thế:

  • Nếu dùng các framework (chẳng hạn như Next.js) thì chúng ta có thể sẽ được hỗ trợ các cơ chế lấy dữ liệu hiệu quả.
  • Dùng các thư viện giúp lấy dữ liệu và cache ở phía client chẳng hạn như React Query hoặc SWR.

Resources