Merutekan pengambilan data di Next.js

Cara Next.js mempercepat navigasi dengan pramuat 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 mengoptimalkannya untuk kecepatan, dan cara menyesuaikannya agar sesuai dengan kebutuhan Anda.

Di Next.js, Anda tidak perlu menyiapkan pemilihan rute secara manual. Next.js menggunakan pemilihan rute 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 lain, gunakan komponen <Link>, mirip dengan cara Anda menggunakan elemen <a> lama:

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

Saat Anda menggunakan komponen <Link> untuk navigasi, Next.js akan melakukan sedikit hal lagi untuk Anda. Biasanya, halaman didownload saat Anda mengikuti link ke halaman tersebut, tetapi Next.js otomatis melakukan pramuat JavaScript yang diperlukan untuk merender halaman.

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

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

Gunakan Chrome DevTools untuk memverifikasi bahwa margherita.js dipramuat: 1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.

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

  2. Klik tab Jaringan.

  3. Centang kotak Nonaktifkan cache.

  4. Muat ulang halaman.

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

Tab Jaringan DevTools dengan margherita.js ditandai.

Cara kerja pengambilan data otomatis

Ambil data Next.js hanya untuk link yang muncul di area tampilan dan menggunakan Intersection Observer API untuk mendeteksinya. Tindakan ini juga menonaktifkan pengambilan data sebelumnya saat koneksi jaringan lambat atau saat pengguna telah 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 demikian, halaman tidak mendownload konten tambahan apa pun yang mungkin diminta oleh halaman yang dimuat sebelumnya hingga Anda mengunjungi link.

Menghindari pengambilan data yang tidak perlu

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

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

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

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

Tab Jaringan DevTools dengan margherita.js ditandai.

Pengambilan data dengan pemilihan rute kustom

Komponen <Link> cocok untuk sebagian besar kasus penggunaan, tetapi Anda juga dapat membuat komponen sendiri untuk melakukan perutean. Next.js memudahkan Anda dengan API router yang tersedia di next/router. Jika ingin melakukan sesuatu (misalnya, mengirim formulir) sebelum menavigasi ke 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 di kode pemilihan rute, gunakan metode prefetch dari useRouter.

Lihat components/MyLink.js dalam contoh aplikasi ini:

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

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

Saat Anda mengklik link, pemilihan rute dilakukan 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 contoh aplikasi ini, halaman index.js memiliki <MyLink> ke margherita.js dan pineapple-pizza.js. Properti prefetch ditetapkan ke true di /margherita dan ke false di /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 didownload dan pineapple-pizza.js tidak:

Tab Jaringan DevTools dengan margherita.js ditandai.

Saat Anda mengklik salah satu link, Konsol akan mencatat "Having fun with Next.js" dan membuka rute baru:

Konsol DevTools menampilkan pesan &#39;Having fun with Next.js&#39;.

Kesimpulan

Saat Anda menggunakan <Link>, Next.js akan otomatis melakukan pengambilan data JavaScript yang diperlukan untuk merender halaman tertaut, sehingga menavigasi ke halaman baru menjadi lebih cepat. Jika menggunakan rute kustom, Anda dapat menggunakan API router Next.js untuk menerapkan pengambilan data sendiri. Hindari mendownload konten yang tidak perlu dengan menonaktifkan pramuat untuk halaman yang jarang dikunjungi.