Komponen Asinkron
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 23 dari 47.
Inilah hasil dari semua yang disiapkan bab sebelumnya. Komponen server bisa bersifat async:
import { getDishes } from '../lib/data';
export default async function Page() {
const dishes = await getDishes();
return <h1>{dishes.length} dishes</h1>;
}Baca itu sekali lagi, karena ini benar-benar hal baru. Komponen ini menunggu. Next.js menjalankannya di server, membiarkan await selesai, dan baru setelah itu mengubah hasilnya menjadi HTML.
Bandingkan dengan versi khusus browser yang biasanya kamu tulis:
- Halaman pertama kali ditampilkan dalam keadaan kosong
- Permintaan dikirim setelah halaman dimuat
- Beberapa state berubah, lalu konten muncul, menimbulkan kedipan yang dilihat pengguna setiap kali
Dengan komponen server async, tidak ada render kosong pertama. Tidak ada yang bisa berubah menjadi tampilan berkedip, karena datanya sudah tersedia saat HTML dibuat. Tidak ada useEffect, tidak ada penanda pemuatan, tidak ada permintaan kedua.
Dua aturan membuat ini valid:
- Hanya komponen server yang boleh menggunakan
async: komponen yang ditandai'use client'tidak boleh - Data harus berasal dari tempat yang dapat dijangkau server: database, file, atau module seperti
lib/data.js
Tantangan
Mudahlib/data.js sudah tersedia dan dikunci. File ini mengekspor getDishes(), yang mengembalikan promise untuk array berisi object { id, name }.
- Jadikan
Pagediapp/page.jsxsebagai fungsiasync. - Gunakan
await getDishes()untuk mengisi variabeldishes. - Di dalam
<ul id="dish-list">, tampilkan satu<li>untuk setiap hidangan, dengankey={dish.id},id={dish.id}, dannamehidangan sebagai teksnya.
Tanpa useEffect, tanpa flag pemuatan, cukup gunakan await.
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.
