Dua Pengambilan Data Sekaligus
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 25 dari 47.
Sebuah halaman biasanya membutuhkan lebih dari satu hal. Cara yang paling jelas untuk menulisnya juga merupakan cara yang lambat:
const dishes = await getDishes(); // 60ms
const drinks = await getDrinks(); // 60ms, baru dimulai sekarang
// total: 120msawait berarti berhenti di sini. Pemuatan kedua bahkan belum dimulai sampai pemuatan pertama selesai, meskipun hasil pemuatan pertama tidak diperlukan.
Mulai keduanya, lalu tunggu sampai keduanya selesai:
const [dishes, drinks] = await Promise.all([
getDishes(),
getDrinks(),
]);
// total: 60msKuncinya ada pada waktunya. Memanggil getDishes() tanpa await memulai prosesnya dan langsung mengembalikan promise, jadi saat Promise.all mulai menunggu, kedua proses pemuatan sudah berjalan. Hasilnya berupa array yang berisi hasil-hasil dalam urutan yang kamu cantumkan.
Aturan praktis:
- Satu proses pemuatan membutuhkan hasil dari proses lainnya →
awaitberurutan, tidak ada cara lain - Keduanya tidak bergantung satu sama lain →
Promise.all
Dua kali pemuatan adalah kemenangan kecil. Lima kali membuat perbedaan antara halaman yang terasa instan dan yang tidak.
Tantangan
Mudahapp/page.jsx memuat hidangan dan minuman secara berurutan. Keduanya tidak saling bergantung, jadi jalankan secara bersamaan.
- Ganti dua
awaityang berurutan dengan satuawait Promise.all([...]), lalu lakukan destructuring kedishesdandrinks.
lib/data.js terkunci, dan file ini memantau apakah kedua pemuatan pernah berlangsung secara bersamaan. Pada akhirnya, #report harus menampilkan Ran together, bukan Ran one at a time.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar Next.js
2Routing dan Tautan
Folder Menjadi RuteRute BertingkatMenautkan HalamanRute DinamisHalaman Tidak DitemukanRekap: Routing5Data di Server
Komponen AsinkronMenunggu Parameter RouteDua Pengambilan Data SekaligusStatus PemuatanMenangani errorRingkasan Pengambilan Data