Data Loading

Iya, di Next.js namanya data fetching, tapi di React Router nyebutnya data loading. Data loading diperluin kalo lo butuh ambil data saat halaman di-render, misalnya buat nge-fetch data dari API atau database.

React Router punya dua fungsi buat data loading: loader dan clientLoader. Seperti yang gue bahas sebelumnya, loader dieksekusi di server saat halaman di-render, sedangkan clientLoader dieksekusi di client/browser.

Contohnya gini:

loaderData bakal otomatis di-infer tipe datanya dari return value loader. Tapi, kalo lo pake fetch, loaderData bakal jadi any. Ini karena data yang lo fetch bisa punya tipe yang beda-beda, tergantung dari API yang lo panggil.

Contohnya:

Di kasus kayak gini, lo bisa bikin type guard manual atau pake library kayak zod:

Kalo misalnya lo pake ORM kayak Drizzle, loader juga bisa langsung nge-return model yang udah di-infer tipe datanya. Contohnya:

Dengan cara ini, loaderData di dalam component Product bakal otomatis punya tipe yang sesuai dengan model products.

Fungsi loader ini juga bakal dihapus dari client bundle, jadi lo aman buat pake API yang cuman boleh jalan di server.