Merutekan pengambilan data di Next.js

Cara Next.js mempercepat navigasi dengan pengambilan data rute dan cara menyesuaikannya.

Milica Mihajlija

Apa yang akan Anda pelajari?

Dalam postingan ini, Anda akan mempelajari cara kerja pemilihan rute di Next.js, cara mengoptimalkan kecepatan, dan cara menyesuaikannya agar sesuai dengan kebutuhan Anda.

Di Next.js, Anda tidak perlu menyiapkan perutean secara manual. Next.js menggunakan perutean berbasis sistem file, yang memungkinkan Anda membuat file dan folder di dalam direktori ./pages/:

Screenshot direktori halaman yang berisi tiga file: index.js, margherita.js, dan pineapple-pizza.js.

Untuk menautkan ke halaman yang berbeda, gunakan komponen <Link>, sama seperti cara Anda menggunakan elemen <a> lama yang bagus:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Saat Anda menggunakan komponen <Link> untuk navigasi, Next.js akan melakukan lebih banyak hal untuk Anda. Biasanya, halaman akan didownload saat Anda mengikuti link ke halaman tersebut, tetapi Next.js secara otomatis mengambil data JavaScript yang diperlukan untuk merender halaman.

Saat Anda memuat halaman dengan beberapa link, kemungkinan besar saat Anda mengikuti link, komponen di balik link tersebut telah diambil. Hal ini meningkatkan responsivitas aplikasi dengan membuat navigasi ke halaman baru lebih cepat.

Pada contoh aplikasi di bawah, halaman index.js ditautkan ke margherita.js dengan <Link>:

Gunakan Chrome DevTools untuk memverifikasi bahwa margherita.js telah diambil data: 1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh layar penuh.

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.

  2. Klik tab Network

  3. Centang kotak Disable cache.

  4. Muat ulang halaman.

Saat Anda memuat index.js, tab Jaringan akan menunjukkan bahwa margherita.js juga telah didownload:

Tab Jaringan DevTools dengan margherita.js ditandai.

Cara kerja pengambilan data otomatis

Pengambilan data Next.js hanya dilakukan link yang muncul di area tampilan dan menggunakan Intersection Observer API untuk mendeteksinya. Tindakan ini juga menonaktifkan pengambilan data saat koneksi jaringan lambat atau saat pengguna mengaktifkan Save-Data. Berdasarkan pemeriksaan ini, Next.js secara dinamis memasukkan tag <link rel="preload"> untuk mendownload komponen untuk navigasi berikutnya.

Next.js hanya mengambil JavaScript, tetapi tidak menjalankannya. Dengan begitu, tindakan tidak mendownload konten tambahan yang mungkin diminta oleh halaman pengambilan data hingga Anda membuka link tersebut.

Menghindari pengambilan data yang tidak perlu

Untuk menghindari download konten yang tidak diperlukan, Anda dapat menonaktifkan pengambilan data untuk halaman yang jarang dikunjungi dengan menetapkan properti prefetch di <Link> ke false:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

Pada aplikasi contoh kedua ini, halaman index.js memiliki <Link> ke pineapple-pizza.js dengan prefetch ditetapkan ke false:

Untuk memeriksa aktivitas jaringan, ikuti langkah-langkah dari contoh pertama. Saat Anda memuat index.js, tab Jaringan DevTools akan menunjukkan bahwa margherita.js telah didownload, tetapi pineapple-pizza.js tidak:

Tab Jaringan DevTools dengan margherita.js ditandai.

Pengambilan data dengan perutean khusus

Komponen <Link> cocok untuk sebagian besar kasus penggunaan, tetapi Anda juga dapat membuat komponen Anda sendiri untuk melakukan perutean. Next.js memudahkan Anda dengan API router yang tersedia di next/router. Jika ingin melakukan sesuatu (misalnya, mengirimkan formulir) sebelum memilih rute baru, Anda dapat menentukannya di kode pemilihan rute kustom.

Saat menggunakan komponen kustom untuk perutean, Anda juga dapat menambahkan pengambilan data ke komponen tersebut. Untuk menerapkan pengambilan data dalam kode perutean, gunakan metode prefetch dari useRouter.

Lihat components/MyLink.js dalam aplikasi contoh ini:

Pengambilan data dilakukan di dalam hook useEffect. Jika properti prefetch pada <MyLink> ditetapkan ke true, rute yang ditentukan dalam properti href akan diambil data saat <MyLink> tersebut dirender:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Saat Anda mengklik link, pemilihan rute akan selesai di handleClick. Pesan akan dicatat ke konsol, dan metode push akan membuka rute baru yang ditentukan di href:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

Dalam aplikasi contoh ini, halaman index.js memiliki <MyLink> untuk margherita.js dan pineapple-pizza.js. Properti prefetch disetel ke true pada /margherita dan ke false pada /pineapple-pizza.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

Saat Anda memuat index.js, tab Jaringan akan menunjukkan bahwa margherita.js telah didownload dan pineapple-pizza.js bukan:

Tab Jaringan DevTools dengan margherita.js ditandai.

Saat Anda mengklik salah satu link, Console akan mencatat log "Bersenang-senang dengan Next.js". dan menavigasi ke rute baru:

Konsol DevTools menampilkan pesan &#39;Bersenang-senang dengan Next.js.&#39;

Kesimpulan

Saat Anda menggunakan <Link>, Next.js secara otomatis mengambil data JavaScript yang diperlukan untuk merender halaman tertaut, sehingga mempercepat navigasi ke halaman baru. Jika menggunakan perutean kustom, Anda dapat menggunakan API router Next.js untuk menerapkan pengambilan data sendiri. Hindari mendownload konten secara tidak perlu dengan menonaktifkan pengambilan data untuk halaman yang jarang dikunjungi.