Status Pemuatan
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 26 dari 47.
Halaman async hanya secepat proses pemuatannya yang paling lambat. Saat Next.js menunggu, apa yang sebenarnya dilihat pengguna?
Letakkan loading.jsx di samping halaman, dan jawabannya adalah: apa pun yang kamu inginkan.
app/
slow/
page.jsx the async page
loading.jsx shown while it resolvesIni adalah komponen biasa dengan ekspor default, dan komponen ini tidak menerima props:
export default function Loading() {
return <p>Loading the special…</p>;
}Kamu tidak pernah merendernya sendiri dan tidak pernah mengimpornya. Letakkan file itu di samping halaman, dan halaman tersebut akan dibungkus dalam batas Suspense: Next.js menampilkan loading.jsx saat kamu menavigasi, menggantinya dengan halaman sebenarnya setelah semua proses await selesai, dan layout di sekitarnya tidak pernah berkedip.
Dua hal berikut berlaku berdasarkan lokasi file:
- File ini mencakup halaman di sebelahnya dan semua yang berada di dalamnya, sampai
loading.jsxyang lebih dalam mengambil alih - Hanya halaman yang berganti: header dan navigasi dari layout tetap berada di tempatnya dan tetap bisa diklik
Perhatikan apa yang tidak kamu tulis: tidak ada flag pemuatan, tidak ada state, tidak ada if (loading). Nama file adalah mekanismenya.
Tantangan
Mudahapp/slow/page.jsx menunggu saat proses pemuatan berlangsung lambat, dan app/slow/loading.jsx sudah ada tetapi masih kosong.
- Di dalam
<main>, tambahkan<p>denganid="loading". - Teksnya harus persis
Loading the special...
Halaman dan lib/data.js terkunci. Tes membuka /slow dan melihat layar sebelum data tiba.
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.
